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

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

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

密码为3到25位非空字符

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

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

首先搭建页面 写几个input框

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。初始都设为空的

html 复制代码
import {ref} from 'vue'
    //定义数据模型
    const registerData = ref({
        username: '',
        password: '',
        phone: '',
        email: ''
    })
java 复制代码
<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>里面生效。

相关推荐
m0dw2 天前
正则表达式梳理
正则表达式
mortimer3 天前
Python 正则替换陷阱:`\1` 为何变成了 `\x01`?
python·正则表达式
666HZ6663 天前
正则表达式使用示例
javascript·vue.js·正则表达式
一百天成为python专家5 天前
python正则表达式(小白五分钟从入门到精通)
数据库·python·正则表达式·pycharm·python3.11
山烛5 天前
小白学Python,标准库篇——随机库、正则表达式库
开发语言·python·正则表达式·random·re·随机库·正则表达式库
小王爱学人工智能5 天前
正则表达式库和第三方库
正则表达式
之歆7 天前
Python-正则表达式-信息提取-滑动窗口-数据分发-文件加载及分析器-浏览器分析-学习笔记
python·学习·正则表达式
数字芯片实验室7 天前
分享一个可以学习正则表达式的网址:Pythex.org
学习·正则表达式
阿蒙Amon9 天前
C#正则表达式全面详解:从基础到高级应用
开发语言·正则表达式·c#
秋难降9 天前
Python 知识点详解(二)
数据库·python·正则表达式