vue3表单参数校验及正则表达式举例详解
这里我们要实现在form表单中对表单项添加参数校验。
校验要求
我们的表单中有用户名、密码、电话号码、邮箱这四个项。
我们设置用户名为3到20位的非空字符
密码为3到25位非空字符
电话号码就用目前用的电话号码正则表达式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。
邮箱就用目前用的邮箱正则表达式，要求一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线。
首先搭建页面
页面主要代码：
<el-form ref="form">
<el-form-item>
<el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item>
<el-input :prefix-icon="Lock" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-input :prefix-icon="Phone" placeholder="请输入电话号码"></el-input>
</el-form-item>
<el-form-item>
<el-input :prefix-icon="Message" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="register">注册
</el-button>
</el-form-item>
</el-form>然后对页面进行数据绑定：
为了方便传数据到后端，我们就设置前端表单项的属性名和后端的一样。再在<script setup></script>里面定义数据模型为registerData，里面有username,password,phone,email。初始都设为空的。
import {ref} from 'vue'
//定义数据模型
const registerData = ref({
username: '',
password: '',
phone: '',
email: ''
})
再绑到表单上。
<el-form ref="form" class="form" autocomplete="off" :model="registerData" >
表单项中用：
<el-form-item>
<el-input :prefix-icon="User" placeholder="请输入用户名"
v-model="registerData.username"></el-input>
</el-form-item>比如设置了数据模型名为registerData后在v-model中用户名我们要写registerData.username。以此类推密码、号码、邮箱。
然后要定义表单规则，校验嘛。我们要写在表单的上面，在<script setup></script>里面生效。
username校验规则部分代码：
username: [
{require: true, message: '请输入用户名', trigger: 'blur'},
{
min: 3,
max: 20,
message: '用户名为3~20位非空字符',
trigger: 'blur'
},
{
validator: checkUserName,
trigger: 'blur'
}
],
username校验规则的checkUserName函数代码：
const checkUserName = (rule, value, callback) => {
if (value.trim() === '') {
callback(new Error("姓名不可为空"))
} else {
return callback();
}
}Const rules{}中有表单中的四项，还是以用户名为例，可以设置默认的{require: true, message: '请输入用户名', trigger: 'blur'},使得必须输入。（不过我试的这个好像不管用，就加上了后面的另外的validator里的规则）。
{
min: 3,
max: 20,
message: '用户名为3~20位非空字符',
trigger: 'blur'
},上面这段是设置输入的长度为3到20位。
{
validator: checkUserName,
trigger: 'blur'
}Validator这里的checkUserName也是我们自己定义的，用来判断输入是否为空的或者输入的全是空格。如果没有这个value.trim()的话，输入三个空格也不会报错。Callback里的error是给出校验不通过时的报错提示信息。
const checkUserName = (rule, value, callback) => {
if (value.trim() === '') {
callback(new Error("姓名不可为空"))
} else {
return callback();
}
}在el-form标签上通过rules属性，绑定校验规则
<el-form ref="form" class="form" autocomplete="off" :model="registerData" :rules="rules">
也就是在原来的基础上加了一个: rules="rules"，这个"rules"是我们在const rules{}的那个"rules"，规则名。
在el-form-item标签上通过prop属性，指定校验项
接下来在el-form-item标签上通过prop属性，指定校验项。是在el-form-item里加prop="username"，也就是你的校验项的属性名。
<el-form-item prop="username">
<el-input :prefix-icon="User" placeholder="请输入用户名"
v-model="registerData.username"></el-input>
</el-form-item>以上就完成了表单的校验。
看看效果：
都点进输入框后不输入内容就点框外的情况：
在框中都输三个空格
在姓名和密码输入框中输入小于三个字符，在电话号码输入框和邮箱输入框输入不符合规则的号码和邮箱
下面提供给大家电话号码的正则表达式和邮箱的正则表达式。
电话号码正则表达式为/^1[3-9]\d{9}$/
/^1[3-9]\d{9}$/- ^：表示匹配字符串的开始。
- 1：匹配数字 1。
- [3-9]：表示匹配数字范围在 3 到 9 之间的任意一个数字。
- \d：匹配任意一个数字。
- {9}：表示前面的 \d 必须重复匹配 9 次。
- $：表示匹配字符串的结束。
综合起来，这个正则表达式用于验证手机号码格式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。
邮箱的正则表达式为：
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
- ^：表示匹配字符串的开始。
- \w+：匹配一个或多个字母、数字或下划线。
- ([-+.]\w+)*：表示匹配一个可选的子模式，其中包含一个连字符、加号或句点，后面跟着一个或多个字母、数字或下划线。整个子模式可以重复零次或多次。
- @：匹配电子邮件地址中的 "@" 符号。
- \w+：再次匹配一个或多个字母、数字或下划线。
- ([-.]\w+)*：类似于第二个子模式，但是匹配的是一个连字符或句点，后面跟着一个或多个字母、数字或下划线。
- \.：匹配电子邮件地址中的句点。
- \w+：再次匹配一个或多个字母、数字或下划线。
- ([-.]\w+)*：类似于前两个子模式，用于匹配邮箱地址中的域名部分。
- $：表示匹配字符串的结束。
综合起来，这个正则表达式用于验证电子邮件地址的格式，匹配的规则大致是“一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线”。
附：邮箱校验规则部分的代码：
//定义邮箱校验规则
const checkEmail = (rule, value, callback) => {
const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (value === '') {
callback(new Error("邮箱不可为空"))
} else if (regEmail.test(value)) {
return callback();
}
callback(new Error("请输入合法的邮箱"));
}到此这篇关于vue3表单参数校验及正则表达式的文章就介绍到这了,更多相关vue3表单参数校验+正则内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
Vue3 的 Provide / Inject 的实现原理其实就是巧妙利用了原型和原型链来实现的。本文将通过示例为大家介绍下provide/inject的具体实现，需要的可以参考一下2022-11-11
这篇文章主要介绍了vue项目的html如何引进public里面的js文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了Vue3 计算属性computed的实现原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
这篇文章主要介绍了如何去掉ElementUI Table的hover变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vux-uploader 图片上传组件的安装及使用方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
今天小编就为大家分享一篇Vue的click事件防抖和节流处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
antd vue table跨行合并单元格,并且自定义内容实例
这篇文章主要介绍了antd vue table跨行合并单元格,并且自定义内容实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本文主要介绍了Vue3 将组件手动渲染到指定元素中的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
在本篇文章里小编给大家分享了关于VUE中使用MUI方法和步骤，有需要的朋友们可以学习参考下。2019-02-02
最新评论