表单校验

1. 表单校验

1. 在 el-form 上动态绑定校验规则

2. 在 data 中定义校验规则

data(){
    return{
        rule: {
            name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        },
    }
}

2. 常用表单校验

{ required: true, message: '请输入活动名称', trigger: 'blur' },     // 非空校验
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }    //字符数校验
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }  // 指定date数据类型+非空校验
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } // 指定array数据类型+非空校验
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } // 指定email数据类型+非空校验

3. 自定义校验规则

1. 在 el-form 上动态绑定校验规则

[注意] v-model.number.trim="form.idNum"

v-model.number.trim=""

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

2. 在 data 中定义校验规则

data(){
    let isNum = (rule, val, callback) => {
      let reg = /^\d{18}$/;
      if (!reg.test(val)) {
        console.log("校验不通过");
        callback(new Error("请输入18位数字"));
      } else {
        console.log("校验通过");
        callback();
      }
    };
    return{
        rule: {
            idNum: [
                { required: true, message: "请输入证件号", trigger: "blur" },
                { validator: isNum, trigger: "blur" },
            ],
        },
    }
}

4. 提交表单时 对整个表单进行校验

1. ref 给 el-from 元素注册引用信息

2. this.$refs.ruleForm 获取 el-from 元素，调用 validate 方法校验整个表单

    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {  // valid===true表示校验通过
          console.log("发起请求，提交数据");
        }
      });
    },

5. 重置整个表单

this.$refs.ruleForm 获取 el-from 元素，调用 resetFields 方法重置整个表单

this.$refs.ruleForm.resetFields()

6. 新增修改列表数据 demo---表单校验应用