带正则表达式的页面表单验证功能

一般注册页面时，用户在填写信息时，需要验证自己的信息，这需要正则表达式。有关详细信息，请参见以下示例。

效果图：(当用户填写的信息不符合规范时，显示错误提示)

我只提供了html结构和js，你按照自己的设计稿写风格。我把正确的时间和错误的时间加了不同的类，用了不同的高度。正确的是高度小，可以隐藏提示红字。

Html结构：

Div id=' wrap' h1register/h1div输入类型=' text ' class=' match ' name=' user ' placeholder='请输入用户名'/span， 长度为5-10位的字母数字下划线/span/Div Input Type=' password ' class=' match ' name=' pwd ' placeholder='请输入密码'/span长度为6-18位的字母数字下划线/span/Div Input Type=' password ' name=' pwd 2 ' placeholder='请再次输入密码'/span密码不一致两次/span/Div Input Type=' text ' class=' match ' name=' tel ' placeholder='请输入电话号码'/span电话号码格式不正确/span/Div div输入类型=' text ' class=' match ' name=' mail ' placeholder='请输入电子邮件'/span邮箱格式不正确/span/Div输入类型=' text ' class=' match ' name=' idcard ' placeholder='请输入身份证'/span证书格式不正确/span/Div class=' submit '输入类型=' submit '值=' register '/Div p ID=' tip '请先输入密码/p/divjs:

//正则表达式以//双斜线开始和结束。限制必须以某事开始，以某事结束。例如，/regular $/script type=' text/JavaScript ' varreg={ user :/[a-za-z]\ w { 4，9第一个数字不能是数字，即小写字母或大写字母。下面的内容\w代表一个字符(数字字母下划线)//需要5-10个字符，所以要去掉第一个数字，需要4-9位的\ w pwd:/[\ da-za-z] {6，18} $/，//。d代表电话号码tel:/1 [34578] \ d {9} $/，//用于判断电话号码。通常电话号码的第一位数字是1，第二位数字只能出现3.4.5.7.8，其余9位数字随机为mail 3360/[1-9a-za-z _//用于判断邮箱。通常邮箱不会以0开头，所以第一位数字是1-9位数字或小写字母或大写字母，第二位数字以任何字符开头。//只能有第一个数字，不能有第二个数字，*表示至少0，@后面跟同样的原因，小写字母或大写字母或数字，需要借代，所以写成\。//com或cn或com.cn。所以，是小写字母还是大写字母。至少有两张idcard :/[1-9]\ d { 16 }[\ dxx]$/，//用于判断身份证。通常第一位不为零，所以取1-9位，中间16位随机，最后一位不是数字就是X；var arr=[document . getelementsbyname(' user ')[0]，document . getelementsbyname(' pwd ')[0]，document . getelementsbyname(' tel ')[0]，document . getelementsbyname(' IDCard ')[0]]；for(var I=0；长度；i ){ arr[i]。onb lur=function(){ if(this . value){ if(reg[this . name])。test(this . value)){ this . parent node . class name=' right '；//判断正确时，add class } else { this . parent node . name=' error '；//判断错误时添加class this . focus()；};};};};var oTip=document . getelementbyid(' tip ')；var opwd=document . getelementsbyname(' pwd 2 ')[0]；opwd.onfous=function(){ if(！arr[1]。value){ arr[1]。焦点()；oTip.className=' showsetTimeout(function(){ otip . class name=' '；},1000);};};opwd . onb lur=function(){ if(this . value){ if(this . value！=arr[1]。value){ this . focus()；this.parentNode.className='错误'；} else { this . ParentNode . class name=' right '；};};};/script以上是边肖介绍的用正则表达式进行页面表单验证的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！