vue+element-ui效验两次输入的密码是否一致

vue+element-ui效验两次输入的密码是否一致

1. 表单

 		<el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleFormRef"
          	>
			<el-form-item prop="pass" label="密码：">
                <el-input
                  prefix-icon="el-icon-my-lock"
                  show-password
                  placeholder="请输入新密码（8-16位数字及字母）"
                  maxlength="16"
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                ></el-input>
            </el-form-item>
            <el-form-item prop="checkPass" label="确认密码：">
                <el-input
                  prefix-icon="el-icon-my-lock"
                  show-password
                  placeholder="确认密码（8-16位数字及字母）"
                  maxlength="16"
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                ></el-input>
            </el-form-item>
       </el-form>

2. 自定义效验规则

	data() {
	    let validatePass = (rule, value, callback) => {
	      let reg = new RegExp(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/);
	      if (value === "") {
	        callback(new Error("请输入密码"));
	      } else if (value.length < 8 || !reg.test(value)) {
	        callback(new Error("请输入含数字和字母的8-16位密码"));
	      } else {
	        if (this.ruleForm.checkPass !== "") {
	          this.$refs.ruleFormRef.validateField("checkPass");
	        }
	        callback();
	      }
	    };
	    let validatePass2 = (rule, value, callback) => {
	      if (value === "") {
	        callback(new Error("请再次输入密码"));
	      } else if (value !== this.ruleForm.pass) {
	        callback(new Error("两次输入密码不一致!"));
	      } else {
	        callback();
	      }
	    };
	    return {
	      //表单数据
	      ruleForm: {
	        pass: "",
	        checkPass: "",
	      },
	      //效验规则
	      rules: {
	        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
	        checkPass: [
	          { required: true, validator: validatePass2, trigger: "blur" },
	        ],
	      },
	    };
	  },