vue 表单校验密码

html 代码

<el-form ref="form" :model="user" :rules="rules" label-width="80px" label-position="top">
 <el-form-item label="密码" prop="newPassword">
      <el-input v-model.trim="user.newPassword" placeholder="请输入密码" type="password" show-password/>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model.trim="user.confirmPassword" placeholder="请确认密码" type="password" show-password/>
    </el-form-item>
</el-form>

 js 代码

data() {
const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
return {

// 表单校验
      rules: {
        newPassword: [
          {required: true, message: "密码不能为空", trigger: "blur"},
          {
            pattern: /^.*(?=.{8,20})(?=.*\d)(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[!@$%^&*?\(\)]).*$/,
            message: '用户密码长度必须介于 8 和 20 之间，必须包含大写字母，小写字母，数字及特殊符号', trigger: 'blur',
          }
        ],
        confirmPassword: [
          {required: true, message: "确认密码不能为空", trigger: "blur"},
          {required: true, validator: equalToPassword, trigger: "blur"},
        ]
      }
}


}