vue elment-ui两次密码不一致验证

form

elemnt-ui表单中rules提供自定义规则。
两次密码不一致可以直接copy一下部分。
注意elemnt验证大致原理：
1 el-form-item上通过props找到rules中定义的规则，然后
2 根据 :model="form"的每一项值{}对比是否有值
3 checkPwd别看漏了，是在return外结尾加不加；都行,但别是,

  <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :hide-required-asterisk="true"
        class="form-box u-font-16 u-flex"
        label-position="left"
      >
        <el-form-item label="原密码" class="u-flex" prop="password">
          <el-input v-model="form.password" placeholder="输入原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" class="u-flex" prop="newPassword">
          <el-input v-model="form.newPassword" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" class="u-flex" prop="newPassword2">
          <el-input
            v-model="form.newPassword2"
            placeholder="确认新密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div @click="sendData" class="u-pointer u-text-center reg-btn">
        确定修改
      </div>
    </div>

js

 data() {
    let checkPwd=((rule,value,callback)=>{
      if(value.trim().length==0){
        callback(new Error("请输入确认密码"));
      }else if(value !=this.form.newPassword){
        callback(new Error("两次密码不一致"));
      }else{
        callback();
      }
    })
    return {
      form: {
        password: "cubaAdmin1234.",
        newPassword: "",
        newPassword2: "",
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
        ],
        newPassword: [
          { 
              required: true, message: "请输入新密码", trigger: "blur" },
        ],
        newPassword2: [
          {
            validator: checkPwd,
            required: true,
            trigger: "blur",
          },
        ],
      },
    };
  },