element-ui Form表单校验相关

1.resetFields与clearValidate方法
//根据需求二选一

 this.$refs[refElement].resetFields(); //移除校验结果并重置字段值
 this.$refs[refElement].clearValidate(); //移除校验结果

2.表单校验规则自定义,使用

//先定义自定义校验的校验规则
const validatePwd = (rule, value, callback) => {
      const originPwd = this.accountCreateForm.accountPwd;
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== originPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        console.log("ok");
        callback();
      }
    };


accountCreateRules: {
        accountConfirmPwd: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          {
            pattern: /^[\w_.,!`@#$%^&*()';:]{8,16}$/,
            message: "密码由8-16位字母、数字、常用字符组成"
          },
          { validator: validatePwd, trigger: "blur" }  //规则列表加入自定义规则
        ]
      }

<el-form
      ref="accountCreateForm"
      :rules="accountCreateRules"
      :model="accountCreateForm"
      label-width="80px"
   >.......
//在form表单声明使用的规则

//通过$refs['']取得form元素进行规则校验结果判定
this.$refs["accountCreateForm"].validate(valid => {
        if (valid) {} //校验通过
});

 



posted @ 2019-07-28 19:32  liehuofeihu  阅读(100)  评论(0)    收藏  举报