element-ui表单验证:用户名、密码、电话、邮箱
之前设计login组件时增加了简单的表单验证,因此对应的users组件,添加用户功能也必须设置相应的验证规则。
文档form表单验证只提供了用户名/密码,是否必须/长度限制的验证。对于电话、邮箱和地址的验证如下:
html部分,先绑定props
<el-form-item label="邮箱" prop="email"
:label-width="formLabelWidth"><el-input v-model="form.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile"
:label-width="formLabelWidth"><el-input v-model="form.mobile" autocomplete="off"></el-input>
</el-form-item>
js部分,在data内的return之前
data () {const checkPhone = (rule, value, callback) => {const phoneReg = /^1[3|4|5|7|8|9][0-9]{9}$/if (!value) {return callback(new Error('电话号码不能为空'))}setTimeout(() => {// Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串// 所以我就在前面加了一个+实现隐式转换if (!Number.isInteger(+value)) {callback(new Error('请输入数字值'))} else {if (phoneReg.test(value)) {callback()} else {callback(new Error('电话号码格式/长度不正确'))}}}, 100)}var checkEmail = (rule, value, callback) => {const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/if (!value) {return callback(new Error('邮箱不能为空'))}setTimeout(() => {if (mailReg.test(value)) {callback()} else {callback(new Error('请输入正确的邮箱格式'))}}, 100)}rules: {mobile: [{ validator: checkPhone, trigger: 'blur', required: true }],email: [{ validator: checkEmail, trigger: 'blur', required: true }]}}
实现效果如下:
一些常用的正则:
1 JS的正则表达式2 3 强:字母+数字+特殊字符 4 ^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$5 6 7 中:字母+数字,字母+特殊字符,数字+特殊字符8 ^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$9 10 弱:纯数字,纯字母,纯特殊字符11 ^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$12 13 14 //校验是否全由数字组成15 16 function isDigit(s)17 {18 var patrn=/^[0-9]{1,20}$/;19 if (!patrn.exec(s)) return false20 return true21 }22 23 //校验登录名:只能输入5-20个以字母开头、可带数字、“_”、“.”的字串24 function isRegisterUserName(s) 25 { 26 var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/; 27 if (!patrn.exec(s)) return false28 return true29 }30 31 function isRegisterUserName(s)32 {33 var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;34 if (!patrn.exec(s)) return false35 return true36 }37 38 39 //校验用户姓名:只能输入1-30个以字母开头的字串40 Javascript代码41 function isTrueName(s) 42 { 43 var patrn=/^[a-zA-Z]{1,30}$/; 44 if (!patrn.exec(s)) return false45 return true46 } 47 }} 48 49 //校验密码:只能输入6-20个字母、数字、下划线 50 function isPasswd(s) 51 { 52 var patrn=/^(\w){6,20}$/; 53 if (!patrn.exec(s)) return false54 return true55 } 56 57 //校验普通电话、传真号码:可以“+”开头,除数字外,可含有“-” 58 function isTel(s) 59 { 60 //var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/; 61 var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/; 62 if (!patrn.exec(s)) return false63 return true64 } 65 66 //校验手机号码:必须以数字开头,除数字外,可含有“-” 67 function isMobil(s) 68 { 69 var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/; 70 if (!patrn.exec(s)) return false71 return true72 } 73 74 //校验邮政编码 75 function isPostalCode(s) 76 { 77 //var patrn=/^[a-zA-Z0-9]{3,12}$/; 78 var patrn=/^[a-zA-Z0-9 ]{3,12}$/; 79 if (!patrn.exec(s)) return false80 return true81 } 82 83 //校验搜索关键字 84 function isSearch(s) 85 { 86 var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>/?]{1}[^`~!@$%^&()+=|\\\] 87 [\]\{\}:;'\,.<>?]{0,19}$/; 88 if (!patrn.exec(s)) return false89 return true90 } 91 92 function isIP(s) //by zergling 93 { 94 var patrn=/^[0-9.]{1,20}$/; 95 if (!patrn.exec(s)) return false96 return true97 } 98 99 正则表达式
100 ^\\d+$ //非负整数(正整数 + 0)
101 ^[0-9]*[1-9][0-9]*$ //正整数
102 ^((-\\d+)|(0+))$ //非正整数(负整数 + 0)
103 ^-[0-9]*[1-9][0-9]*$ //负整数
104 ^-?\\d+$ //整数
105 ^\\d+( //非负浮点数(正浮点数 + 0)
106 ^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$
107 //正浮点数
108 ^((-\\d+( //非正浮点数(负浮点数 + 0)
109 ^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
110 //负浮点数
111 ^(-?\\d+)( //浮点数
112 ^[A-Za-z]+$ //由26个英文字母组成的字符串
113 ^[A-Z]+$ //由26个英文字母的大写组成的字符串
114 ^[a-z]+$ //由26个英文字母的小写组成的字符串
115 ^[A-Za-z0-9]+$ //由数字和26个英文字母组成的字符串
116 ^\\w+$ //由数字、26个英文字母或者下划线组成的字符串
117 ^[\\w-]+( //email地址
118 ^[a-zA-z]+://( //url
119 ^[A-Za-z0-9_]*$
120
121 匹配完整域名的正则表达式:
122 [a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?
element-ui表单验证:用户名、密码、电话、邮箱相关推荐
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
- element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
- Element UI——表单验证输入的数字检测出来是string解决方案
问题描述 打印 判断类型 问题分析 解决方案 数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
- element ui表单验证
这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框 这里只讲弹框里面的校验代码: <template><div id="cre ...
- element ui 表单验证通过后没有绿色框 求解 (已解)
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
- element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 点击编辑框 解决方法:添加表单重置验证 我们可以通过为两个表单添加ref属性 之后 ...
- element ui表单验证,验证通过但是不进if(valid){}步骤
表单自定义验证,如图: data中定义的验证规则: var validatePass = (rule, value, callback) => {if (value === '') {retur ...
- jQuery表单验证用户名密码
//校验用户名function checkUsername() {var username = $("#username").val();alert(username);var u ...
- element -ui 表单验证 如果 需要验证的v-model 是对象中的对象 总是提示没有填写....
如果需要验证的是以上方式那么 rules的书写方法需要该改变 ? 转载于:https://www.cnblogs.com/wxqworld/p/11301139.html
- Element ui 表单验证触发方式:trigger的两种选项
trigger: 'blur' blur失去焦点 比如输入框里.校验文本框是否为空 trigger: 'change' change数据改变 需要手动选择的东西,可以用change 区别: 没有进行任 ...
最新文章
- 1013. 数素数 (20)
- 【leetcode 简单】 第五十五题 打家劫舍
- Java字符串的十大问题
- flux_Flux建筑模式简介
- 安全生产六步法是什么_支塘镇探索“五步法”压紧压实出租厂房安全生产主体责任...
- Java开发者必须掌握的20个Spring常用注解
- jQuery.noConflict() 解决冲突 原理深入
- 201671010135 《面向对象程序设计课程学习进度条》
- php无法上传,为什么php 大文件无法上传
- 大数据的4v特征及思考_大数据智能下数据脱敏的思考
- Stata | 初试
- 钓鱼网站检测技术的演进
- 计算机自我鉴定高中生200字,精编高中生自我鉴定200字左右3篇 高中自我鉴定200字...
- YB1205B 外置MOS异步升压恒流LED驱动控制器
- 记一次搜狐畅游后台开发笔试
- 【操作系统习题】假定某多道程序设计系统供用户使用的主存空间为100 KB ,磁带机2台,打印机1台
- springboot下载excel(解决文件损坏问题)
- FZU - 2062 - Suneast Yayamao
- 【20210409期AI简报】INT8加速训练方案、用树莓派打造的寄居蟹机器人
- LINK : fatal error LNK1104: 无法打开文件“opencv_world400d.lib”---VS2017+OpenCV配置过程
热门文章
- rdd转换成java数据结构_如何将CSV文件转换为RDD
- 织梦自定义html文本,织梦自定义标签dede:sql根据自定义字段填的文章id获取相关文章...
- python计算一年有多少天_Python 案例 004 (计算当前时间是一年中的第几天)
- GPU Gems1 - 5 改良的Perlin噪声的实现
- 语言省考安徽考区_安徽省中小学新任教师公开招聘统一笔试 中学信息技术学科考试大纲...
- 【TensorFlow-windows】学习笔记四——模型构建、保存与使用
- ubuntu 15.04 /var/log/下各个日志文件及修复无message文件和debug文件
- 计算机视觉应关注的资源
- request.RequestContextListener
- SQL登录 18470 18452 错误