vue3+element-plus，常用el-form表单校验rules、数据校验、正则表达式校验-手机号校验、密码校验、必填校验等
一、完备表单校验示例https://i-blog.csdnimg.cn/direct/ee01366185334be8b30a0b321be789f5.png
<template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules">
<el-form-item label="测试样例" prop="name">
<el-input v-model="ruleForm.name"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
<el-button @click="resetForm(ruleFormRef)">取消</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {FormInstance, FormRules} from "element-plus";
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
name: '',
})
const rules = reactive<FormRules<RuleForm>>({
name: [
{required: true, message: '此为必填项', trigger: 'blur'},
{min: 3, max: 5, message: '长度为3-5个字符', trigger: 'blur'},
],
})
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('提交成功')
} else {
console.log('提交失败', fields)
}
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
</script>
1、详解
[*] el-form 组件概述
model：绑定表单数据的对象。
rules：表单的校验规则。
ref：用于通过代码引用表单组件。
[*] 提交表单和实行校验
submitForm 函数会通过 formEl.validate() 方法触发表单校验。
[*] formEl.validate
formEl.validate 是 el-form 提供的一个方法，它会对所有表单项举行校验。
valid：假如校验通过，返回 true；假如有字段不合法，返回 false。
fields：包含所有未通过校验的字段信息。
二、常用校验
0、校验详解
const rules = reactive({
email: [
{ required: true, message: '邮箱为必填项', trigger: 'blur' },
{ type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
],
password: [
{ required: true, message: '密码为必填项', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度应为6到20个字符', trigger: 'blur' }
],
phone: [
{ pattern: /^\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
]
customField: [
{
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('字段不能为空'));
} else {
callback();
}
},
trigger: 'blur'
}
]
name: [
{ required: true, whitespace: true, message: '不能为空或空格', trigger: 'blur' }
]
});
[*]required：是否为必填项
[*]message：验证失败时的错误提示
[*]trigger：触发校验的事件
blur：当输入框失去焦点时触发校验。
change：当输入框内容变化时触发校验。
submit：在提交表单时，所有字段会被验证。
[*]type：字段的类型
email：验证电子邮件地点。
number：验证数字。
url：验证 URL 地点。
string：验证字符串（默认）。
array：验证数组。
[*]min 和 max：指定字段值的最小值和最大值
[*]pattern：正则表达式，用于自定义验证
[*]validator：自定义验证函数
可以编写本身的验证逻辑。函数接收三个参数：
rule：当前规则对象。
value：字段值。
callback：验证完成后调用的回调函数，必须在自定义验证函数中调用该回调。
[*]whitespace：空格是否为有效输入
假如为 true，则输入的空格会被视为有效输入。假如为 false，则空格会被认为是无效输入。
1、必填校验
const rules = reactive<FormRules<RuleForm>>({
name: [
{required: true, message: '此为必填项', trigger: 'blur'},
],
})
2、手机号校验
const rules = reactive<FormRules<RuleForm>>({
phone: [
{ pattern: /^\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
]
})
3、邮箱校验
const rules = reactive<FormRules<RuleForm>>({
email: [
{ required: true, type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
]
})
4、身份证号校验
const rules = reactive<FormRules<RuleForm>>({
idCard: [
{
pattern: /^(?:\d{15}|\d{18}|\d{17}X)$/,
message: '请输入有效的身份证号',
trigger: 'blur'
}
]
})
5、地点校验
const rules = reactive<FormRules<RuleForm>>({
address: [
{ required: true, message: '请输入地址', trigger: 'blur' },
{ min: 5, max: 100, message: '地址长度应在5到100个字符之间', trigger: 'blur' }
]
})
6、密码校验（大写字母、小写字母、数字和特殊字符）
const rules = reactive<FormRules<RuleForm>>({
password: [
{ required: true, message: '密码为必填项', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度应为6到20个字符', trigger: 'blur' },
{ pattern: /^(?=.*)(?=.*)(?=.*\d)(?=.*[@$!%*?&]){6,20}$/, message: '密码必须包含大写字母、小写字母、数字和特殊字符', trigger: 'blur' }
]
})
7、确认密码校验
const rules = reactive<FormRules<RuleForm>>({
confirmPassword: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{ validator: (rule, value, callback) => {
if (value !== form.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
}, trigger: 'blur' }
]
})
8、金额校验（整数、小数）
const rules = reactive<FormRules<RuleForm>>({
amount: [
{
pattern: /^+(\.{1,2})?$/,
message: '请输入有效的金额，最多两位小数',
trigger: 'blur'
}
]
})
9、数字校验（整数）
const rules = reactive<FormRules<RuleForm>>({
number: [
{ pattern: /^\d*$/, message: '请输入有效的数字', trigger: 'blur' }
]
})
10、日期校验
const rules = reactive<FormRules<RuleForm>>({
date: [
{ required: true, type: 'date', message: '请选择日期', trigger: 'blur' }
]
})
11、URL校验
const rules = reactive<FormRules<RuleForm>>({
url: [
{
pattern: /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/,
message: '请输入有效的URL地址',
trigger: 'blur'
}
]
})
12、用户名校验（只能包含字母、数字和下划线）
const rules = reactive<FormRules<RuleForm>>({
username: [
{
pattern: /^+$/,
message: '用户名只能包含字母、数字和下划线',
trigger: 'blur'
}
]
})
13、自定义验证（比方：检查字段值是否为特定内容）
const rules = reactive<FormRules<RuleForm>>({
customField: [
{
validator: (rule, value, callback) => {
if (value !== 'expectedValue') {
callback(new Error('值必须为 expectedValue'));
} else {
callback();
}
},
trigger: 'blur'
}
]
})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]