ElementUI 表单验证

本示例基于vue3的elementUI Plus，以下案例是一个修改密码的操作

<el-form :model="passform" ref="updatePasswordRef" label-width="120px" :rules="updatePasswordRules">
    <el-form-item label="旧密码" prop="oldPassword">
        <el-input type="password" v-model="passform.oldPassword" />
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="passform.newPassword" />
    </el-form-item>
    <el-form-item label="新密码" prop="newPasswordAgain">
        <el-input type="password" v-model="passform.newPasswordAgain" />
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="passformOnSubmit(updatePasswordRef)">确认修改</el-button>
    </el-form-item>
</el-form>
<script setup>
import { reactive, ref } from '@vue/reactivity'
import inputValidate from "../../utils/validate";
const updatePasswordRef=ref()
const passform=reactive({
    oldPassword:"",
    newPassword:"",
    newPasswordAgain:"",
})
// 验证密码格式
const validatePass = (rule, value, callback) => {
  if(!inputValidate.isPasswd(value)){
    callback("密码格式不正确 6-20位")
  }else{
    callback()
  }
}
// 验证两次新密码是否一致
const validatePassAgain=(rule, value, callback)=>{
  if(passform.newPassword!=value){
    callback("两次新密码输入不一致")
  }else{
    callback()
  }
}
// 验证规则定义
const updatePasswordRules=reactive({
  oldPassword:[
    { required: true,message:"必填项",trigger: 'blur'},
    { trigger: 'blur' ,validator:validatePass},
  ],
  newPassword:[
    { required: true,message:"必填项",trigger: 'blur'},
    { trigger: 'blur' ,validator:validatePass},
  ],
  newPasswordAgain:[
    { required: true,message:"必填项",trigger: 'blur'},
    { trigger: 'blur' ,validator:validatePass},
    { trigger: 'blur' ,validator:validatePassAgain},
  ],
})
// 提交操作
const passformOnSubmit=(updatePasswordRef)=>{
  // if(!updatePasswordRef)return
  updatePasswordRef.validate((valid)=>{
    console.log("提交结果",valid)
    if(valid){
      console.log("修改密码提交")
    }else{
      console.log("不可以提交")
      return false;
    }
  })
}
</script>