当我们需要给输入框添加动态的规则时,就比如上面这种。当我给移动电话2输入电话时,就需要给它添加上验证规则
<el-col :span="6">
<el-form-item label="移动电话1:" prop="mobilePhoneOne">
<el-input v-model="formAreas.mobilePhoneOne" size="mini"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="移动电话2:" prop="mobilePhoneTwo">
<el-input v-model="formAreas.mobilePhoneTwo" size="mini"></el-input>
</el-form-item>
</el-col>
这时候只需要将formAreas.mobilePhoneTwo的验证规则的required的值改为false,它就会自动添加上验证规则
mobilePhoneOne: [
{
required: true,
message: "请输入电话号码",
trigger: "blur",
},
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的电话号码",
trigger: ["blur", "change"],
},
],
mobilePhoneTwo: [
{
required: false,
message: "请输入电话号码",
trigger: "blur",
},
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的电话号码",
trigger: ["blur", "change"],
},
],
更多细节的问题请参考element官网