526互联

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

发布时间 2023-09-30 16:17:58作者: 刘宏缔的架构森林

一，官方文档地址:

https://element-plus.gitee.io/zh-CN/component/form.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99

二，js代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<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>

三，效果:

说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/09/29/vue-zi-ding-yi-validator-yan-zheng-gui-ze-elementplus-2-3-12/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com

四，查看vue/element-plus框架版本：

liuhongdi@lhdpc:/data/vue/responsive$ npm list vue
responsive@0.1.0 /data/vue/responsive
└─┬ vue@3.3.4
  └─┬ @vue/server-renderer@3.3.4
    └── vue@3.3.4 deduped
liuhongdi@lhdpc:/data/vue/responsive$ npm list element-plus
responsive@0.1.0 /data/vue/responsive
└── element-plus@2.3.12