vue表单校验

 <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' },
    ],
  });

const timeed = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('请选择现合同期限'));
    }
    callback();
  };

grade: [{ required: true, tigger: 'change', validator: timed }],
//validator要和自定义的函数名一样

ruleForm.value.validate((valid) => {
//ruleForm.value是刚开始定义的为null的响应式变量
console.log(valid)
//valid返回的是布尔值，所有都填写了为true，反之则为false
})