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" 就是需要验证的东西
可以定义输入的规则
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' }, ], idCard: [ { required: true, message: '请输入证件号码', tigger: 'change' }, { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确' }, ], sex: [{ required: true, message: '请选择性别', tigger: 'change' }], staffStatus: [{ required: true, message: '请选择员工状态', tigger: 'change' }], credit: [{ required: true, tigger: 'change', validator: bankAccountValid }], basePay: [{ required: true, message: '请输入岗位工资', tigger: 'change' }], agreeEnd: [{ required: true, tigger: 'change', validator: time }], agreeNum: [{ required: true, tigger: 'change', validator: timeed }], grade: [{ required: true, tigger: 'change', validator: graded }], // company: [{ required: true, tigger: 'change', validator: gongsi }], project: [{ required: true, tigger: 'change', validator: items }], });
绑定完成之后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 })
