表单自定义规则的校验

在 Vue 3 中使用 Element Plus 的表单组件举行自定义规则的校验非常方便。Element Plus 提供了 ElForm 和 ElFormItem 组件，它们内置了表单验证的功能。下面我将具体介绍如何使用 Element Plus 举行自定义规则的校验。
创建表单及规则

首先，你需要创建一个 ElForm 组件，并为其提供一个 model 和 rules 对象。然后在每个 ElFormItem 中绑定 prop 属性，该属性应该对应于 model 中的字段。
示例代码

1. <template>
2.   <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
3.     <el-form-item label="用户名" prop="username">
4.       <el-input v-model="form.username"></el-input>
5.     </el-form-item>
6.     <el-form-item label="密码" prop="password">
7.       <el-input v-model="form.password" type="password"></el-input>
8.     </el-form-item>
9.     <el-form-item>
10.       <el-button type="primary" @click="submitForm">提交</el-button>
11.     </el-form-item>
12.   </el-form>
13. </template>
15. <script setup>
16. import { ref } from 'vue';
18. const formRef = ref(null);
19. const form = ref({
20.   username: '',
21.   password: ''
22. });
24. const rules = ref({
25.   username: [
26.     { required: true, message: '请输入用户名', trigger: 'blur' },
27.     { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
28.   ],
29.   password: [
30.     { required: true, message: '请输入密码', trigger: 'blur' },
31.     { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
32.     { validator: validatePassword, trigger: 'blur' }
33.   ]
34. });
36. function validatePassword(rule, value, callback) {
37.   if (value === '') {
38.     callback(new Error('请输入密码'));
39.   } else {
40.     if (form.value.username === value) {
41.       callback(new Error('密码不能与用户名相同'));
42.     } else {
43.       callback();
44.     }
45.   }
46. }
48. function submitForm() {
49.   formRef.value.validate((valid) => {
50.     if (valid) {
51.       alert('提交成功！');
52.     } else {
53.       console.log('验证失败');
54.       return false;
55.     }
56.   });
57. }
58. </script>

复制代码

说明

• 定义表单模子：form 是一个响应式对象，用于存储表单数据。
  
• 定义验证规则：rules 对象定义了表单验证规则。
  
  
  
  • required: 是否必填。
    
  • min 和 max: 字符串长度的最小和最大值。
    
  • trigger: 触发验证的事件，例如 blur 表示失去焦点时触发验证，change是change:改变触发。
    
  • validator: 自定义验证函数。
    
  
  
• 自定义验证函数：validatePassword 函数用于验证暗码是否与用户名雷同。
  
• 提交表单：submitForm 函数调用 formRef.value.validate 方法来触发表单验证。如果全部验证都通过，则提交表单。
  

注意事项

• 确保在 ElForm 上使用 ref 属性，以便可以通过引用访问表单实例。
  
• 自定义验证函数的第一个参数 rule 是当前验证规则的信息，第二个参数 value 是表单字段的值，第三个参数 callback 是回调函数，用于陈诉验证结果。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。