vue3表单参数校验及正则表达式举例详解

　　目录

　　这里我们要实现在form表单中对表单项添加参数校验。

　　校验要求

　　我们的表单中有用户名、密码、电话号码、邮箱这四个项。

　　我们设置用户名为3到20位的非空字符

　　密码为3到25位非空字符

　　电话号码就用目前用的电话号码正则表达式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。

　　邮箱就用目前用的邮箱正则表达式，要求一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线。

　　首先搭建页面

　　页面主要代码：

　　@click="register">注册

　　然后对页面进行数据绑定：

　　为了方便传数据到后端，我们就设置前端表单项的属性名和后端的一样。再在里面生效。

　　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属性，绑定校验规则

　　也就是在原来的基础上加了一个: rules="rules"，这个"rules"是我们在const rules{}的那个"rules"，规则名。

　　在el-form-item标签上通过prop属性，指定校验项

　　接下来在el-form-item标签上通过prop属性，指定校验项。是在el-form-item里加prop="username"，也就是你的校验项的属性名。

　　v-model="registerData.username">

　　以上就完成了表单的校验。

　　看看效果：

　　都点进输入框后不输入内容就点框外的情况：

　　在框中都输三个空格

　　在姓名和密码输入框中输入小于三个字符，在电话号码输入框和邮箱输入框输入不符合规则的号码和邮箱

　　下面提供给大家电话号码的正则表达式和邮箱的正则表达式。

　　电话号码正则表达式为/^1[3-9]d{9}$/

　　/^1[3-9]d{9}$/

　　综合起来，这个正则表达式用于验证手机号码格式，要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。

　　邮箱的正则表达式为：

　　/^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表单参数校验+正则内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

　　您可能感兴趣的文章: