Vue input标签 email和手机号输入验证

1、 email邮箱验证规则
2、手机号正则表达式验证规则
vue写法：

<script>
export default {data() {// 验证手机号的规则var cheackMobile = (rule, value, cb) => {// 手机号一般最小以“13”开头const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/if (regMobile.test(value)) {return cb()}cb(new Error('请输入合法的手机号!'))}return {email: '',phone: '',rules: {email: [{ required: true, message: '请输入邮箱', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ validator: cheackMobile, trigger: 'blur' }]}}
}
</script>

运行截图：

Vue input标签 email和手机号输入验证相关推荐

h5 input标签使用正则表达式限制输入
本人小白,目前正在做一个web系统,今天遇到一个需求是患者姓名录入的时候只能是字母和汉字.本人分析了一下,首先,这个不能在js里写,不能等到客户填写完毕之后再提醒,因为除了患者姓名之外,还需要限制患者 ...
input标签设置纯数字输入
input标签设置纯手机号输入(键盘输入或粘贴时自动去除非数字字符) 解决方案: <input type="tel" placeholder="请输入11位手机 ...
JS控制 input 标签输入为数字及错误提示
学习笔记: 假设现在需要限制<input>标签内输入的内容为数字,并且对其大小进行判断. 涉及的知识主要有: 1.onblur , onblur 事件会在对象失去焦点时发生,也就是当焦点 ...
input 标签常见属性
在 css 中 input 是非常常用的标签,input 标签用于接收用户输入,为行内块元素.他不仅仅是接收文本的输入,可以通过type属性的设置我们还可以接收不同类型值的输入. input标签的ty ...
在vue中input标签手机号码进行正则验证
今天遇到一个问题就是在vue中给input进行正则手机号码的验证下面是今天的代码,用js进行书写,没有用elementUI,代码如下: <div cla ...
VUE—移动端手机号正则验证，不正确显示‘请输入正确手机号’，若正确跳转到发送验证码（图文详情）
VUE-移动端手机号正则验证,不正确显示'请输入正确手机号',若正确跳转到发送验证码先看效果图第一步:写布局 <input type="text" placeholder ...
vue 中input的输入验证
在vue中用最普通的input对内容做限制比较容易,但是没有样式,比较丑,比如只能输入文字(以下都以文字为例),直接对其值正则匹配即可 >查看其他匹配的方法< <input typ ...
vue 前端邮箱、密码、手机号码等输入验证规则
最近在写前端表单验证的时候,发现一篇文章质量很好,所以写下这篇文章记录原文章链接:vue 邮箱.密码.手机号码等输入验证规则 1.手机号 const checkPhone = (rule, valu ...
用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。
题目:写一个用于登录的表单,包含用户名.密码和手机号码.提交数据的时候,要求验证: 1. 用户名必须输入汉字: 2. 密码总共6位,前2位为字母,后4位为数字: 3. 手机号码符合中国大陆手机号码格式 ...

Vue input标签 email和手机号输入验证

Vue input标签 email和手机号输入验证

Vue input标签 email和手机号输入验证相关推荐

最新文章

热门文章