Vue form verification rules are invalid, rules dynamic selection, rules dynamic verification, rules object nested verification

1. Problem description

Here are some problems caused by a dynamic switching rule verification, sorted out, as shown below.

1. Dynamic binding rule verification

There is a requirement here to dynamically switch the radio and verify the input box. The interface is as follows

I searched around on the Internet and used the first method to solve it. Dynamically add verification rules. The method is as follows

          <el-form-item label="授权密匙(Key)" v-if="form.value.platformType === 2" prop="value.hundredApiKey" :rules="form.value.platformType === 2 ? rules.hundredApiKey:[{ required: false}]">
            <el-col :span="10">
              <el-input v-model="form.value.hundredApiKey" placeholder="请输入授权密匙(Key)" />
            </el-col>
          </el-form-item>

Use if to judge whether platformType is equal to 2, and then add rules, rules.hundredApiKey and required: false, see what is said on the Internet later, you can achieve dynamic effects directly through v-if, you don’t need to add it later through :rules, it will not be displayed This rule is disabled by default.

      // 表单校验
      rules: {
    
    
        hundredApiKey: [{
    
     required: true, message: "快递100 API Key不能为空", trigger: ['blur','change']}]
      }

2. The problem of binding rules and form

There are other problems encountered here, that is, the input obviously has a value, but it just prompts that the input value cannot be empty, and can be eliminated according to the following steps:

:model="ruleForm" 绑定的ruleForm值是否挂载成功并且操作的是否是这个表单。
:rules="rules" 校验的规则格式绑定的rules是否定义并且格式正确为对象数组。
el-form-item中的prop="name"是否和rules中的name: [ {
    
     required: true, message: '请输入活动名称', trigger: 'blur' }, ], 的名称一致，两个name是相同的，element的校验就是根据这个prop找对应的输入框的。
<el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"确保对象ruleForm中有name这个属性！

Notice:

If the data level of your rules and form binding is the same, as shown below

<el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="选项：" prop="name">
      <el-select v-model="form.name">
        <el-option label="测试一" value="1"></el-option>
        <el-option label="测试二" value="2"></el-option>
      </el-select>
    </el-form-item>
</el-form>
 
form:{
    
    
	name:'',
},
rules:{
    
    
    name:[{
    
    required: true, message: '请选择', trigger: 'blur'}]
}

The above binding is no problem, I use the following format

form:{
    
    
	a:{
    
    
		name:'',
	}
},

There is a name attribute in the a object. Binding it in the above way will not work. The correct way is as follows. There are two solutions:

Solution 1: When defining and binding rules, the rule structure is consistent with the data structure

<el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="选项：" prop="a.name">
      <el-select v-model="form.a.name">
        <el-option label="测试一" value="1"></el-option>
        <el-option label="测试二" value="2"></el-option>
      </el-select>
    </el-form-item>
</el-form>
 
form:{
    
    
	a:{
    
    
		name:'',
	}
},
rules:{
    
    
    'a.name':[{
    
    required: true, message: '请选择', trigger: 'blur'}]
}

Solution 2: Modify the form-bound data object to be a sub-object of the object.

<el-form :model="form.a" :rules="rules" ref="form">
    <el-form-item label="选项：" prop="name">
      <el-select v-model="form.a.name">
        <el-option label="测试一" value="1"></el-option>
        <el-option label="测试二" value="2"></el-option>
      </el-select>
    </el-form-item>
</el-form>
 
form:{
    
    
	a:{
    
    
		name:'',
	}
},
rules:{
    
    
    name:[{
    
    required: true, message: '请选择', trigger: 'blur'}]
}

3. Rules verification using v-if is invalid

If there are multiple components in the above form, only one is valid, and all other validation rules are invalid.

<el-form-item label="选项：" prop="name">

This problem has been messing with me for a long time. I found this rule in the process of debugging later, and found the answer on the Internet. You only need to add the key attribute.

<el-form-item label="选项：" prop="name" key="name">