el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)

el-form表单动态校验

el-form常规校验方式:

// 结构部分
<el-form ref="form" :model="form" :rules="rules">
	<el-form-item label="活动名称: " prop="name" required>
       <el-input v-model="form.name" />
    </el-form-item>
</el-form>

// script部分
<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  }
}

save() {
    this.$refs.form.validate((valid) => {
        if (valid) {
        	console.log('通过表单校验')
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

正题部分-表单动态校验
场景: 输入框根据单选项来动态校验表单
没有选中的选项就不用校验

效果:

<el-form ref="form" :model="form" :rules="rules">
	<el-form-item label="跳转类型: " prop="skipType" required>
        <el-radio-group v-model="form.skipType"">
          <el-radio :label="0" style="display: block; margin: 10px 0">无跳转</el-radio>
          <div>
            <el-radio :label="1" style="display: inline-block; margin: 11px 0">小程序内页</el-radio>
            <el-form-item
              label=""
              label-width="0"
              style="display: inline-block; height:20px"
              prop="insidePage"
              :rules="form.skipType === 1 ? rules.insidePage : []"
              :required="form.skipType === 1"
            >
              <!-- :rules="[{ required: true, message: '请输入小程序页面路径', trigger: 'blur' }]" -->
              <el-input
                v-model.trim="form.insidePage"
                placeholder="输入小程序页面路径"
                autocomplete="off"
                maxlength="20"
                style="width: 160px; margin-left: 10px"
              />
            </el-form-item>
          </div>
          <div>
            <el-radio :label="2" style="display: inline-block; margin: 11px 0 14px">外部小程序</el-radio>
            <el-form-item
              label=""
              label-width="0"
              style="display: inline-block"
              prop="outsideAppId"
              :rules="form.skipType === 2 ? rules.outsideAppId : []"
              :required="form.skipType === 2"
            >
              <el-input
                v-model.trim="form.outsideAppId"
                placeholder="输入小程序APPID"
                autocomplete="off"
                maxlength="20"
                style="width: 160px; margin-left: 10px"
              />
            </el-form-item>
         </div>
      </el-radio-group>
   </el-form-item>
</el-form>

// script部分
<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        skipType: [{ required: true, message: '请选择跳转类型', trigger: 'change' }],
        insidePage: [{ required: true, message: '请输入小程序页面路径', trigger: 'blur' }],
        outsideAppId: [{ required: true, message: '请输入小程序appid', trigger: 'blur' }]
      }
    }
  }
}

save() {
    this.$refs.form.validate((valid) => {
        if (valid) {
        	console.log('通过表单校验')
        }
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件

:rules="form.skipType === 1 ? rules.insidePage : []"
:required="form.skipType === 1" 
1
2