vue + element-plus自定义表单验证（修改密码业务）

news2025/5/29 7:33:36

写一个vue组件Password.vue

没有表单验证只有3个表单项

<template>
  <div>
    <el-form>
      <el-form-item label="旧密码">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="验证密码">
        <el-input></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>

</script>

路由省略

给这个表单绑定一个对象

<template>
  <div>
    <el-form :="data.form">
      <el-form-item label="旧密码" v-model="data.form.oldPassword">
        <el-input ></el-input>
      </el-form-item>
      <el-form-item label="新密码" v-model="data.form.password">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="验证密码" v-model="data.form.confirmPassword">
        <el-input></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive}  from "vue";
const data = reactive({
  form: {
    oldPassword: '',
    password: '',
    confirmPassword: ''
  }
})
</script>

给表单绑定规则注意表单项一定要有prop属性属性值对应 data.rules里的属性

<template>
  <div>
    <el-form :model="data.form" :rules="data.rules">
      <el-form-item label="旧密码" prop="oldPassword" >
        <el-input v-model="data.form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码"   prop="password">
        <el-input v-model="data.form.password"></el-input>
      </el-form-item>
      <el-form-item label="验证密码" >
        <el-input v-model="data.form.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive}  from "vue";
const data = reactive({
  form: {
    oldPassword: '',
    password: '',
    confirmPassword: ''
  }
  ,
  rules: {
    oldPassword: [
      { required: true, message: '请输入旧密码', trigger: 'blur' },
      { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, max: 32, message: '长度在 6 到 32个字符', trigger: 'blur' }
    ]
  }
})
</script>

添加自定义规则注意规则有优先级的

<template>
  <div>
    <el-form :model="data.form" :rules="data.rules">
      <el-form-item label="旧密码" prop="oldPassword" >
        <el-input v-model="data.form.oldPassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码"   prop="password">
        <el-input v-model="data.form.password"></el-input>
      </el-form-item>
      <el-form-item label="验证密码"   prop="confirmPassword">
        <el-input v-model="data.form.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {reactive}  from "vue";
const validatePass1 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入新密码'));
  } else if (value !== '123') {
    callback(new Error('旧密码错误'));
  }else{
    callback();
  }
}
const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'));
  } else if (value !== data.form.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
}
const data = reactive({
  form: {
    oldPassword: '',
    password: '',
    confirmPassword: ''
  }
  ,
  rules: {
    oldPassword: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
      {validator: validatePass1, trigger: 'blur'}
    ],
    password: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, max: 32, message: '长度在 6 到 32个字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请再次输入新密码', trigger: 'blur' },

      { validator: validatePass2, trigger: 'blur' }
    ]
  }
})
</script>