element新密码和再次输入新密码

新密码和再次输入新密码

<el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="200px"
        class="demo-ruleForm"
      >
        <el-form-item label="原密码:" prop="password">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="pass">
          <el-input
            type="password"
            v-model="ruleForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码:" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

status-icon input框后面的图标
rules 验证规则
ref 绑定节点ruleForm

通过验证规则来验证新密码和再次输入的新密码

 rules: {
        password: [{ validator: validatePass1, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },

validator相当于绑定的变量

  var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
 var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("原密码为空"));
      }
      callback();
    };

callback()必须写

 confirm(formName) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
          let params = {
            password: this.ruleForm.password,
            password: this.ruleForm.pass,
            password: this.ruleForm.checkPass,
          };
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

如果验证通过会进入判断条件然后发请求