vue 修改密码与确认密码是否一致验证

修改密码功能有时候，需要输入原密码，新密码，确认密码，新密码和确认密码要一致，如果不一致出现提示

实现效果如下

首先写输入框

                       <el-form-item label="修改密码:" prop="newPassword">
                            <el-input
                                v-model="addForm.newPassword"
                                type="password"
                            />
                        </el-form-item>
                        <el-form-item label="确认密码:" prop="confirmPassword">
                            <el-input
                                v-model="addForm.confirmPassword"
                                type="password"
                            />
                        </el-form-item>

之后定义规则

  // 定义密码验证规则
  
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                if (this.addForm.confirmPassword !== "") {
                    this.$refs.addForm.validateField("confirmPassword");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.addForm.newPassword) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };

再定义数据

 addForm: {   
                newPassword: "",

                confirmPassword: ""
            },

在验证规则内加上

 // 表单验证
            addRules: {
                newPassword: [
                    { validator: validatePass, trigger: ["blur", "change"] }
                ],

                confirmPassword: [
                    {
                        validator: validatePass2,

                        trigger: ["blur", "change"]
                    }
                ]
            },

这样就可以了

参考文献：

blog.csdn.net/qq_42546652…