vue3格式校验邮箱和手机号

最新推荐文章于 2024-04-04 23:19:00 发布
最新推荐文章于 2024-04-04 23:19:00 发布
阅读量2.4k 收藏 3
点赞数
分类专栏： vue 文章标签： 前端 正则表达式 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53266704/article/details/124711830
版权

vue3格式校验邮箱和手机号这里写自定义目录标题

  <q-input outlined dense :rules="[
            (val) => val != null || val?.trim() !== '' || '邮箱不能为空',
            val=>/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/.test(val)|| '请输入正确的邮箱格式'
              ]" v-model="email"
              maxlength="50" placeholder="邮箱">
            </q-input>

<q-input outlined dense :rules="[(val) => val != null || val?.trim() !== '' || '手机不能为空',
              val=>/^[1][3,4,5,7,8,9][0-9]{9}$/.test(val) || '请输入正确的手机格式'
              ]"
              class="q-mt-sm" v-model="phone" maxlength="50"
              placeholder="手机">
            </q-input>

我们项目这里是用了quaras样式库哈 不过不影响什么

晨曦06
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手机号码、邮箱等敏感数据前端显示脱敏处理的解决方案
02-08
在我们数据库中有些时候会保存一些用户的敏感信息，比如：手机号、银行卡等信息，如果这些信息以明文的方式保存，那么是不安全的。 假如：黑客黑进了数据库，或者离职人员导出了数据，那么就可能导致这些敏感数据的泄漏 由于我们系统中使用了Mybatis作为数据库持久层，因此决定使用Mybatis的TypeHandler或Plugin来解决 也可以自定义注解实现数据脱敏
Vue 正则表达式验证表单字段(如用户名/密码/真实姓名/身份证/手机号/邮箱)的合法性
寻思旧京洛
08-21 1万+
1. 给页面表单对象添加验证属性 由于我的项目使用的el-form,则给el-form添加属性 :rules="registerRules" ref="registerForm" 为el-form-item每个表单子项添加 prop 属性, 例如 <el-form-item prop="username"> <el-input name="username"...
vue3表单参数校验+正则表达式
最新发布
nameofworld的博客
04-04 1519
这里我们要实现注册页在form表单中对表单项添加参数校验。我们的表单中有用户名、密码、电话号码、邮箱这四个项。要求手机号码以 1 开头，第二位为 3 到 9 之间的数字，后面跟着任意 9 个数字，总共是 11 位数字。邮箱正则表达式，要求一个或多个字母、数字或下划线，接着是 @ 符号，然后是一个或多个字母、数字或下划线，接着是一个句点，最后是一个或多个字母、数字或下划线。对页面进行数据绑定。在el-form标签上通过rules属性，绑定校验规则，在el-form-item标签上通过prop属性，指定校验项。
Vue组件开发之LeanCloud带图形校验码的短信发送功能
01-19
有15万开发者使用LeanCloud服务，其中不乏知乎、懂球帝、爱范儿、拉卡拉等知名应用，LeanCloud提供了数据存储、即时消息……等一站式服务，并从常用的用户管理需求出发，提供了邮箱验证、短信验证……等用户账户相关的服务。 为防止攻击者恶意发送海量短信造成用户账户损失并影响正常业务，LeanCloud推出了免费图形校验码服务，并且可以在应用设置中设置“强制短信验证服务使用图形校验码”。 Vue是目前使用较广泛的三大前端框架之一，其数据驱动及组件化的特性使得前端开发更为快捷便利。 LeanCloud提供的由客户发起的短信发送场景主要有用户验证、用户密码重置，虽然不是很多场景，但如果每个场
2020 Vue 正则表达式验证邮箱和手机号码【整理】
超逸の学习技术博客
01-17 1万+
验证邮箱和手机号 //验证邮箱的规则 var checkEmail = (rule,value,cb) =>{ const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; if(regEmail.test(value)){ ...
vue验证电话号码和邮箱的正则表达式和代码示例
qq_28245087的博客
04-25 2658
【代码】vue验证电话号码和邮箱的正则表达式和代码示例。
vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change
weixin_44867717的博客
08-28 2856
【代码】vue3中，form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change。
vue3手机号正则校验
qq_70036866的博客
08-09 967
callback(new Error("请输入正确格式的手机号码"))callback(new Error('请输入手机号码'))message: '请输入当前手机号码'直接复制粘贴就可用！
前端Vue手机号校验及后端Java手机号校验
m0_66403070的博客
09-13 2227
前端Vue手机号校验及后端Java手机号校验
vue3 +Element Plus form表单检验身份证、手机号、邮箱
Black_hand001的博客
02-23 977
最近项目中有一个校验身份证号手机号的业务,就简单封装了一下检验。使用的时候在对应页面引入。
Vue项目中手机号码验证
jolinoy的博客
09-24 986
输入错误的号码，弹出提示窗口！Vue项目中手机号码验证。
vue中手机号,邮箱正则验证以及60s发送验证码的实例
12-29
input name=phone type=number placeholder=手机号 v-model=phone/> <button type=button :disabled=disabled @click=sendcode class=btns>{{btntxt}}</button> <p class=fl style=margin-...
js表单验证插件、邮箱验证、中文汉字验证、手机号码验证、数字验证
09-26
js表单验证插件支持多种内容表单验证，有js邮箱地址验证、js中文汉字验证、js手机号码验证、js数字验证等。内含js代码下载。
VUE表单验证.txt
01-13
文档包含了常见的表单验证规则，包括是否合法IP地址、是否手机号码或者固话、是否固话、是否手机号码、是否身份证号码、是否邮箱、合法url、自动检验数值的范围、验证数字输入框最大数值、验证是否1-99之间、验证...
vue 使用正则判断邮箱格式是否正确 手机号 证件啥的都可以套用
Austin的博客
11-07 1242
fm：就是写一个过滤器 把输入的内容通过过滤器来判断 创建一个js文件 export function checkIdNum(rule, value, callback) { const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; if (!value) { return callback(new Error('邮箱不能为空')) } else if (!reg.test(value)) {
vue3.0+element-puls 正则验证
qq_45293165的博客
05-23 682
【代码】vue3.0+element-puls 正则验证。
vue 校验手机号、网址（各种正则校验）
热门推荐
mylbest的博客
08-26 1万+
vue form表单校验
vue3 表单中使用正则表达式
m0_73481765的博客
07-29 951
因此，在Vue3中，使用正则表达式来验证表单输入字段的格式非常简单，只需将其与模板中的内容相匹配即可。在Vue3中，可以使用正则表达式来验证表单输入字段的格式。输入是否与我们的正则表达式一致。如果不符合，我们将显示一条错误消息。变量，并将其添加到组件的data属性中。在这个例子中，我们定义了一个。
vue判断邮箱校验
fury的博客
01-13 1678
callback(new Error('请输入有效的邮箱'));callback(new Error('请正确填写邮箱'));
vue3结合elementplus使用js实现电话号码和邮箱的校验
05-30
在Vue3结合Element Plus使用JS实现电话号码和邮箱的校验可以通过以下步骤： 1. 安装Element Plus 在终端中运行以下命令安装Element Plus： ``` npm install element-plus --save ``` 2. 引入Element Plus 在你的Vue组件中，引入Element Plus的必要组件： ```javascript <template> <div> <el-input v-model="phone" placeholder="请输入手机号"></el-input> <el-button type="primary" @click="checkPhone">校验手机号码</el-button> <el-input v-model="email" placeholder="请输入邮箱"></el-input> <el-button type="primary" @click="checkEmail">校验邮箱</el-button> </div> </template> <script> import { reactive } from 'vue'; import { ElInput, ElButton } from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; export default { components: { ElInput, ElButton, }, setup() { const state = reactive({ phone: '', email: '', }); const checkPhone = () => { const phoneReg = /^[1][3-9][0-9]{9}$/; if (!phoneReg.test(state.phone)) { alert('请输入正确的手机号码'); } else { alert('手机号码正确'); } }; const checkEmail = () => { const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/; if (!emailReg.test(state.email)) { alert('请输入正确的邮箱地址'); } else { alert('邮箱地址正确'); } }; return { ...state, checkPhone, checkEmail, }; }, }; </script> ``` 3. 在模板中，使用Element Plus提供的ElInput和ElButton组件来分别接收用户输入的电话号码和邮箱地址，并且使用v-model指令来绑定到state.phone和state.email属性上。 4. 在checkPhone和checkEmail函数中，定义好需要校验的正则表达式，并且使用test方法来检查用户输入是否符合格式要求。如果不符合，弹出错误提示，否则提示正确。 通过以上步骤，就可以在Vue3结合Element Plus使用JS实现电话号码和邮箱的校验了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值