vue:自定义validator/验证规则(element-plus@2.3.12)

<template>
  <div class="view_root">
  <el-card shadow="never">
<el-form :model="ruleForm" status-icon :rules="rules" ref="refForm" label-width="100px" class="demo-ruleForm" style="width:600px;">
<el-form-item label="原始密码" prop="originPass" style="margin-bottom: 20px;">
  <el-input  type="password" v-model="ruleForm.originPass" placeholder="请输入原始密码" autocomplete="off" show-password></el-input>
</el-form-item>
<el-form-item label="新密码" prop="newPass" style="margin-bottom: 20px;">
  <el-input type="password" placeholder="请输入新密码" v-model="ruleForm.newPass" autocomplete="off" show-password></el-input>
</el-form-item>
<el-form-item label="确认新密码" prop="checkPass" style="margin-bottom: 20px;">
  <el-input type="password" placeholder="请再次输入新密码" v-model="ruleForm.checkPass" autocomplete="off" show-password></el-input>
</el-form-item>
<el-form-item>
  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  <el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
  </el-card>
  </div>
</template>
<script>
import {ElMessage} from "element-plus";
import {ref,reactive} from "vue";
import {post} from "@/api/axios";

export default {
  name:"UserPassword",
  setup() {
    //表单的ref
    const refForm = ref(null);

    //提交表单
    const submitForm = () => {
      refForm.value.validate((valid) => {
        if (valid) {
          //提交到api
          try {
      var data = new FormData();
      // 创建一个表单数据
      data.append("originpass",ruleForm.originPass);
      data.append("newpass",ruleForm.newPass);
      data.append("checkpass",ruleForm.checkPass);

      post('/api/login/password',data).then(res => {
        if (res.code == 0) {
              //提示
              ElMessage.success("密码修改成功!");
        } else {
          ElMessage.error("密码修改失败:"+res.msg);
        }
      }).catch((error) => {
        console.log(error)
      })

          } catch (error) {
            console.log(error)
            ElMessage.error("密码修改出错");
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    };


    //重置表单
    const resetForm = () => {
      refForm.value.resetFields();
    }

    //表单的数据
    const ruleForm = reactive({
        originPass:'',
        newPass: '',
        checkPass: '',
    });

    //原始密码的验证
    const validateOriginPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入原始密码'));
      } else if (value.length < 3) {
        callback(new Error('密码长度应不低于6个字符'));
      } else {
        callback();
      }
    };
    //新输入密码的验证
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else if (value.length < 6) {
        callback(new Error('密码长度应不低于6个字符'));
      } else {
        if (ruleForm.checkPass !== '') {
            refForm.value.validateField('checkPass', () => null);
        }
        callback();

      }
    };
    //确认密码的验证
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value.length < 6) {
        callback(new Error('密码长度应不低于6个字符'));
      } else if (value !== ruleForm.newPass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

      //表单验证的规则
      const rules = ref({
        originPass: [
          {required: true, validator: validateOriginPass, trigger: 'blur' }
        ],
        newPass: [
          { required: true,validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          {required: true, validator: validatePass2, trigger: 'blur' }
        ],
      });

       return {
          refForm,
          rules,
          ruleForm,

          resetForm,
          submitForm,
       }

  },
}
</script>