vue3+element-plus，常用el-form表单校验rules、数据校验、正则表达式校验- ...

一、完备表单校验示例

1. <template>
2.     <el-form
3.       ref="ruleFormRef"
4.       :model="ruleForm"
5.       :rules="rules">
6.       <el-form-item label="测试样例" prop="name">
7.         <el-input v-model="ruleForm.name"/>
8.       </el-form-item>
9.       <el-form-item>
10.         <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
11.         <el-button @click="resetForm(ruleFormRef)">取消</el-button>
12.       </el-form-item>
13.     </el-form>
14. </template>
16. <script lang="ts" setup>
17. import {reactive, ref} from 'vue'
18. import {FormInstance, FormRules} from "element-plus";
20. const ruleFormRef = ref<FormInstance>()
21. const ruleForm = reactive<RuleForm>({
22.   name: '',
23. })
24. const rules = reactive<FormRules<RuleForm>>({
25.   name: [
26.     {required: true, message: '此为必填项', trigger: 'blur'},
27.     {min: 3, max: 5, message: '长度为3-5个字符', trigger: 'blur'},
28.   ],
29. })
31. const submitForm = async (formEl: FormInstance | undefined) => {
32.   if (!formEl) return
33.   await formEl.validate((valid, fields) => {
34.     if (valid) {
35.       console.log('提交成功')
36.     } else {
37.       console.log('提交失败', fields)
38.     }
39.   })
40. }
41. const resetForm = (formEl: FormInstance | undefined) => {
42.   if (!formEl) return
43.   formEl.resetFields()
44. }
45. </script>

复制代码

1、详解

• el-form 组件概述
  model：绑定表单数据的对象。
  rules：表单的校验规则。
  ref：用于通过代码引用表单组件。
  
• 提交表单和实行校验
  submitForm 函数会通过 formEl.validate() 方法触发表单校验。
  
• formEl.validate
  formEl.validate 是 el-form 提供的一个方法，它会对所有表单项举行校验。
  valid：假如校验通过，返回 true；假如有字段不合法，返回 false。
  fields：包含所有未通过校验的字段信息。
  

二、常用校验

0、校验详解

1. const rules = reactive({
2.   email: [
3.     { required: true, message: '邮箱为必填项', trigger: 'blur' },
4.     { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
5.   ],
6.   password: [
7.     { required: true, message: '密码为必填项', trigger: 'blur' },
8.     { min: 6, max: 20, message: '密码长度应为6到20个字符', trigger: 'blur' }
9.   ],
10.   phone: [
11.     { pattern: /^[1-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
12.   ]
13.   customField: [
14.   {
15.     validator: (rule, value, callback) => {
16.       if (!value) {
17.         callback(new Error('字段不能为空'));
18.       } else {
19.         callback();
20.       }
21.     },
22.     trigger: 'blur'
23.   }
24.   ]
25.   name: [
26.   { required: true, whitespace: true, message: '不能为空或空格', trigger: 'blur' }
27.   ]
28. });

复制代码

• required：是否为必填项
  
• message：验证失败时的错误提示
  
• trigger：触发校验的事件
  blur：当输入框失去焦点时触发校验。
  change：当输入框内容变化时触发校验。
  submit：在提交表单时，所有字段会被验证。
  
• type：字段的类型
  email：验证电子邮件地点。
  number：验证数字。
  url：验证 URL 地点。
  string：验证字符串（默认）。
  array：验证数组。
  
• min 和 max：指定字段值的最小值和最大值
  
• pattern：正则表达式，用于自定义验证
  
• validator：自定义验证函数
  可以编写本身的验证逻辑。函数接收三个参数：
  rule：当前规则对象。
  value：字段值。
  callback：验证完成后调用的回调函数，必须在自定义验证函数中调用该回调。
  
• whitespace：空格是否为有效输入
  假如为 true，则输入的空格会被视为有效输入。假如为 false，则空格会被认为是无效输入。
  

1、必填校验

1. const rules = reactive<FormRules<RuleForm>>({
2.   name: [
3.     {required: true, message: '此为必填项', trigger: 'blur'},
4.   ],
5. })

复制代码

2、手机号校验

1. const rules = reactive<FormRules<RuleForm>>({
2.   phone: [
3.     { pattern: /^[1-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
4.   ]
5. })

复制代码

3、邮箱校验

1. const rules = reactive<FormRules<RuleForm>>({
2.   email: [
3.     { required: true, type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
4.   ]
5. })

复制代码

4、身份证号校验

1. const rules = reactive<FormRules<RuleForm>>({
2.   idCard: [
3.     {
4.       pattern: /^(?:\d{15}|\d{18}|\d{17}X)$/,
5.       message: '请输入有效的身份证号',
6.       trigger: 'blur'
7.     }
8.   ]
9. })

复制代码

5、地点校验

1. const rules = reactive<FormRules<RuleForm>>({
2.   address: [
3.     { required: true, message: '请输入地址', trigger: 'blur' },
4.     { min: 5, max: 100, message: '地址长度应在5到100个字符之间', trigger: 'blur' }
5.   ]
6. })

复制代码

6、密码校验（大写字母、小写字母、数字和特殊字符）

1. const rules = reactive<FormRules<RuleForm>>({
2.   password: [
3.     { required: true, message: '密码为必填项', trigger: 'blur' },
4.     { min: 6, max: 20, message: '密码长度应为6到20个字符', trigger: 'blur' },
5.     { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,20}$/, message: '密码必须包含大写字母、小写字母、数字和特殊字符', trigger: 'blur' }
6.   ]
7. })

复制代码

7、确认密码校验

1. const rules = reactive<FormRules<RuleForm>>({
2.   confirmPassword: [
3.     { required: true, message: '请确认密码', trigger: 'blur' },
4.     { validator: (rule, value, callback) => {
5.       if (value !== form.password) {
6.         callback(new Error('两次输入的密码不一致'));
7.       } else {
8.         callback();
9.       }
10.     }, trigger: 'blur' }
11.   ]
12. })

复制代码

8、金额校验（整数、小数）

1. const rules = reactive<FormRules<RuleForm>>({
2.   amount: [
3.     {
4.       pattern: /^[0-9]+(\.[0-9]{1,2})?$/,
5.       message: '请输入有效的金额，最多两位小数',
6.       trigger: 'blur'
7.     }
8.   ]
9. })

复制代码

9、数字校验（整数）

1. const rules = reactive<FormRules<RuleForm>>({
2.   number: [
3.     { pattern: /^[1-9]\d*$/, message: '请输入有效的数字', trigger: 'blur' }
4.   ]
5. })

复制代码

10、日期校验

1. const rules = reactive<FormRules<RuleForm>>({
2.   date: [
3.     { required: true, type: 'date', message: '请选择日期', trigger: 'blur' }
4.   ]
5. })

复制代码

11、URL校验

1. const rules = reactive<FormRules<RuleForm>>({
2.   url: [
3.     {
4.       pattern: /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/,
5.       message: '请输入有效的URL地址',
6.       trigger: 'blur'
7.     }
8.   ]
9. })

复制代码

12、用户名校验（只能包含字母、数字和下划线）

1. const rules = reactive<FormRules<RuleForm>>({
2.   username: [
3.     {
4.       pattern: /^[a-zA-Z0-9_]+$/,
5.       message: '用户名只能包含字母、数字和下划线',
6.       trigger: 'blur'
7.     }
8.   ]
9. })

复制代码

13、自定义验证（比方：检查字段值是否为特定内容）

1. const rules = reactive<FormRules<RuleForm>>({
2.   customField: [
3.     {
4.       validator: (rule, value, callback) => {
5.         if (value !== 'expectedValue') {
6.           callback(new Error('值必须为 expectedValue'));
7.         } else {
8.           callback();
9.         }
10.       },
11.       trigger: 'blur'
12.     }
13.   ]
14. })

复制代码

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