写一个vue组件Password.vue
没有表单验证只有3个表单项

1. <template>
   
2.   <div>
   
3.     <el-form>
   
4.       <el-form-item label="旧密码">
   
5.         <el-input></el-input>
   
6.       </el-form-item>
   
7.       <el-form-item label="新密码">
   
8.         <el-input></el-input>
   
9.       </el-form-item>
   
10.       <el-form-item label="验证密码">
    
11.         <el-input></el-input>
    
12.       </el-form-item>
    
13.     </el-form>
    
14.   </div>
    
15. </template>
    
16. <script setup>
    
17. </script>

复制代码

路由省略

给这个表单绑定一个对象

1. <template>
   
2.   <div>
   
3.     <el-form :="data.form">
   
4.       <el-form-item label="旧密码" v-model="data.form.oldPassword">
   
5.         <el-input ></el-input>
   
6.       </el-form-item>
   
7.       <el-form-item label="新密码" v-model="data.form.password">
   
8.         <el-input></el-input>
   
9.       </el-form-item>
   
10.       <el-form-item label="验证密码" v-model="data.form.confirmPassword">
    
11.         <el-input></el-input>
    
12.       </el-form-item>
    
13.     </el-form>
    
14.   </div>
    
15. </template>
    
16. <script setup>
    
17. import {reactive}  from "vue";
    
18. const data = reactive({
    
19.   form: {
    
20.     oldPassword: '',
    
21.     password: '',
    
22.     confirmPassword: ''
    
23.   }
    
24. })
    
25. </script>

复制代码

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

1. <template>
   
2.   <div>
   
3.     <el-form :model="data.form" :rules="data.rules">
   
4.       <el-form-item label="旧密码" prop="oldPassword" >
   
5.         <el-input v-model="data.form.oldPassword"></el-input>
   
6.       </el-form-item>
   
7.       <el-form-item label="新密码"   prop="password">
   
8.         <el-input v-model="data.form.password"></el-input>
   
9.       </el-form-item>
   
10.       <el-form-item label="验证密码" >
    
11.         <el-input v-model="data.form.confirmPassword"></el-input>
    
12.       </el-form-item>
    
13.     </el-form>
    
14.   </div>
    
15. </template>
    
16. <script setup>
    
17. import {reactive}  from "vue";
    
18. const data = reactive({
    
19.   form: {
    
20.     oldPassword: '',
    
21.     password: '',
    
22.     confirmPassword: ''
    
23.   }
    
24.   ,
    
25.   rules: {
    
26.     oldPassword: [
    
27.       { required: true, message: '请输入旧密码', trigger: 'blur' },
    
28.       { min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
    
29.     ],
    
30.     password: [
    
31.       { required: true, message: '请输入新密码', trigger: 'blur' },
    
32.       { min: 6, max: 32, message: '长度在 6 到 32个字符', trigger: 'blur' }
    
33.     ]
    
34.   }
    
35. })
    
36. </script>

复制代码

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

1. <template>
   
2.   <div>
   
3.     <el-form :model="data.form" :rules="data.rules">
   
4.       <el-form-item label="旧密码" prop="oldPassword" >
   
5.         <el-input v-model="data.form.oldPassword"></el-input>
   
6.       </el-form-item>
   
7.       <el-form-item label="新密码"   prop="password">
   
8.         <el-input v-model="data.form.password"></el-input>
   
9.       </el-form-item>
   
10.       <el-form-item label="验证密码"   prop="confirmPassword">
    
11.         <el-input v-model="data.form.confirmPassword"></el-input>
    
12.       </el-form-item>
    
13.     </el-form>
    
14.   </div>
    
15. </template>
    
16. <script setup>
    
17. import {reactive}  from "vue";
    
18. const validatePass1 = (rule, value, callback) => {
    
19.   if (value === '') {
    
20.     callback(new Error('请输入新密码'));
    
21.   } else if (value !== '123') {
    
22.     callback(new Error('旧密码错误'));
    
23.   }else{
    
24.     callback();
    
25.   }
    
26. }
    
27. const validatePass2 = (rule, value, callback) => {
    
28.   if (value === '') {
    
29.     callback(new Error('请再次输入新密码'));
    
30.   } else if (value !== data.form.password) {
    
31.     callback(new Error('两次输入密码不一致!'));
    
32.   } else {
    
33.     callback();
    
34.   }
    
35. }
    
36. const data = reactive({
    
37.   form: {
    
38.     oldPassword: '',
    
39.     password: '',
    
40.     confirmPassword: ''
    
41.   }
    
42.   ,
    
43.   rules: {
    
44.     oldPassword: [
    
45.         { required: true, message: '请输入旧密码', trigger: 'blur' },
    
46.       {validator: validatePass1, trigger: 'blur'}
    
47.     ],
    
48.     password: [
    
49.       { required: true, message: '请输入新密码', trigger: 'blur' },
    
50.       { min: 6, max: 32, message: '长度在 6 到 32个字符', trigger: 'blur' }
    
51.     ],
    
52.     confirmPassword: [
    
53.       { required: true, message: '请再次输入新密码', trigger: 'blur' },
    
54.       { validator: validatePass2, trigger: 'blur' }
    
55.     ]
    
56.   }
    
57. })
    
58. </script>

复制代码

到此这篇关于vue + element-plus自定义表单验证（修改密码业务）的文章就介绍到这了,更多相关vue element-plus表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339710kt3.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！