1,首先给form表单绑定一下
<el-form
:model="form"
label-width="auto"
label-position="top"
ref="ruleForms"
:rules="rules"
:size="formSize"
:close-on-click-modal="false"
>
const ruleForms = ref(null);
这个 :rules="rules" 就是需要验证的东西
2,可以定义输入的规则
const rules = reactive({
name: [
{ required: true, message: '请输入员工姓名', trigger: 'change' },
{ min: 2, max: 7, message: '长度在 2 到 7 个字符' },
],
tel: [
{ required: true, message: '请输入电话号', trigger: 'change' },
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
],
});
绑定完成之后rules里的名称要和form表单上的prop相等
<el-form-item label="姓名" prop="name" class="option">
//prop
有时候一些表单无法验证可以使用自定义规则
const timeed = (rule, value, callback) => {
if (!value) {
return callback(new Error('请选择现合同期限'));
}
callback();
};
在rules里这样写:
grade: [{ required: true, tigger: 'change', validator: timed }],
//validator要和自定义的函数名一样
在最后的确认按钮的事件里
ruleForm.value.validate((valid) => {
//ruleForm.value是刚开始定义的为null的响应式变量
console.log(valid)
//valid返回的是布尔值,所有都填写了为true,反之则为false
})