最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
正则表达式进行页面表单验证功能
时间:2017-05-27 编辑:简简单单 来源:一聚教程网
一般做到注册页面的时候,当用户填完信息,都需要对他们的信息进行验证,这就要用到正则表达式,具体看下面这个例子。
效果图:(当用户填写的信息不符合规范时显示错误提示)
我只提供了html结构和js,样式你们按照自己的设计稿自己写,我是分别给正确的时候和错误的时候加了不同的class,用了不同的高度,正确是高度小,可以把提示的红字隐藏。
html结构:
代码如下 | 复制代码 |
注册
字母开头,长度5-10位字母数字下划线
字母数字长度6-18位
两次密码不一致
电话号码格式不正确
邮箱格式不正确
证件格式不正确
请先输入密码 |
js:
代码如下 | 复制代码 |
//正则表达式已//双斜杠开始和结束,限制必须要以什么什么开头要在之前加^,限制必须要以什么什么结尾要在后面加$,例:/^正则$/ varreg = { user:/^[a-zA-Z]\w{4,9}$/, //用来判断用户名,第一位不能为数字,也就是小写字母或者大写字母,后面的内容\w表示字符(数字字母下划线) //要求是5-10位字符,所以出去第一位,还需要4-9位的\w pwd:/^[\da-zA-Z]{6,18}$/, //用来判断密码,html结构中要求是数字字符6到18位,\d表示数字 tel:/^1[34578]\d{9}$/, //用来判断电话号码,通常手机号第一位为1,第二位只可能出现3.4.5.7.8,后面剩下的9位数字随机 mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/, //用来判断邮箱,通常邮箱没有以0开头的,所以第一位为1-9数字或者小写字母或者大写字母,第二位开始任意字符 //也可以只有第一位没有第二位,*表示至少0个,@后面同理,小写字母或者大写字母或者数字,.需要转意符,所以写成\. //点后面通常是com或者cn或者com.cn,所以是小写字母或者大写字母至少两位 IDCard:/^[1-9]\d{16}[\dxX]$/, //用来判断身份证,通常第一位不为零,所以取1-9的数字,中间的16位数字随机,最后一位要么是数字要么是X }; vararr = [ document.getElementsByName('user')[0], document.getElementsByName('pwd')[0], document.getElementsByName('tel')[0], document.getElementsByName('mail')[0], document.getElementsByName('IDCard')[0] ]; for(vari=0;i arr[i].onblur =function(){ if(this.value){ if(reg[this.name].test(this.value)){ this.parentNode.className ='right'; //判断正确的时候加的class }else{ this.parentNode.className ='wrong'; //判断错误的时候加的class this.focus(); }; }; }; }; varoTip = document.getElementById('tip'); varopwd = document.getElementsByName('pwd2')[0]; opwd.onfous =function(){ if(!arr[1].value){ arr[1].focus(); oTip.className ='show'; setTimeout(function() { oTip.className =''; },1000); }; }; opwd.onblur =function(){ if(this.value){ if(this.value != arr[1].value){ this.focus(); this.parentNode.className ='wrong'; }else{ this.parentNode.className ='right'; }; }; }; |
-
上一个: 纯JS实现弹性导航条效果
-
下一个: canvas仿iwatch时钟效果
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31