要在 el-form 中自定义校验某个表单字段的值,可以使用自定义校验函数。您可以通过在 el-form-item 上设置 prop 属性和 rules 属性来实现。
以下是一个示例:
<el-form ref="form" :model="formData" label-width="120px">
<el-form-item label="名称" prop="name" :rules="[{ validator: validateName }]">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
在上述示例中,我们给 el-form-item 添加了 prop 属性,prop 属性的值需要与 formData 对象中的字段名称对应。同时,在 el-form-item 中通过 rules 属性指定了自定义的校验函数 validateName。
接下来,在 Vue 组件中定义 validateName 校验函数:
export default {
data() {
return {
formData: {
name: ''
}
};
},
methods: {
validateName(rule, value, callback) {
// 进行自定义校验逻辑
if (value === 'admin') {
callback(new Error('名称不能为 admin'));
} else {
callback();
}
},
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 校验通过,进行表单提交操作
console.log('表单校验通过');
} else {
// 校验不通过,进行错误处理
console.log('表单校验未通过');
}
});
}
}
};
在上述代码中,通过 validateName 函数对输入的名称进行自定义校验。如果名称为 ‘admin’,则调用 callback 函数传递错误信息,否则调用 callback 函数不传递任何参数。同时在这个函数里面也可以把data中的数据作为参考进行判断。
最后,我们在 submitForm 方法中调用 el-form 的 validate 方法来触发表单校验。在回调函数中,根据校验结果进行相应的处理。
通过以上的步骤,您就可以在 el-form 中自定义校验某个表单字段的值了。