vue3表单参数校验+正则表达式

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

校验要求

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

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

密码为3到25位非空字符

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

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

首先搭建页面

页面主要代码:

html 复制代码
                    <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。初始都设为空的。

javascript 复制代码
import {ref} from 'vue'
    //定义数据模型
    const registerData = ref({
        username: '',
        password: '',
        phone: '',
        email: ''
    })

再绑到表单上。

html 复制代码
<el-form ref="form" class="form" autocomplete="off" :model="registerData" >

表单项中用:

html 复制代码
<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校验规则部分代码:

javascript 复制代码
username: [
            {require: true, message: '请输入用户名', trigger: 'blur'},
            {
                min: 3,
                max: 20,
                message: '用户名为3~20位非空字符',
                trigger: 'blur'
            },
            {
                validator: checkUserName,
                trigger: 'blur'
            }
        ],

username校验规则的checkUserName函数代码:

javascript 复制代码
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属性,绑定校验规则

html 复制代码
<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",也就是你的校验项的属性名。

html 复制代码
<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}$/**

javascript 复制代码
/^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+)*$/

javascript 复制代码
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

^:表示匹配字符串的开始。

\w+:匹配一个或多个字母、数字或下划线。

([-+.]\w+)*:表示匹配一个可选的子模式,其中包含一个连字符、加号或句点,后面跟着一个或多个字母、数字或下划线。整个子模式可以重复零次或多次。

@:匹配电子邮件地址中的 "@" 符号。

\w+:再次匹配一个或多个字母、数字或下划线。

([-.]\w+)*:类似于第二个子模式,但是匹配的是一个连字符或句点,后面跟着一个或多个字母、数字或下划线。

\.:匹配电子邮件地址中的句点。

\w+:再次匹配一个或多个字母、数字或下划线。

([-.]\w+)*:类似于前两个子模式,用于匹配邮箱地址中的域名部分。

$:表示匹配字符串的结束。

综合起来,这个正则表达式用于验证电子邮件地址的格式,匹配的规则大致是"一个或多个字母、数字或下划线,接着是 @ 符号,然后是一个或多个字母、数字或下划线,接着是一个句点,最后是一个或多个字母、数字或下划线"。


附:邮箱校验规则部分的代码:

javascript 复制代码
//定义邮箱校验规则
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("请输入合法的邮箱"));
}

希望这篇文章能够帮助到你^_^加油加油

相关推荐
花花鱼4 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09337 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
web行路人38 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00140 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
嚣张农民2 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236482 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript