javascript制作的简单注册模块表单验证.docx

1、javascript制作的简单注册模块表单验证javascript制作的简单注册模块表单验证 javascript制作的简单注册模块表单验证通常在我们的HTML页面表单中有大量的数据验证工作， 免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一 段JavaScript代码提供给大家使用。使用起来很简单，大家拿回去自由扩展吧一个注册框 进行表单验证处理如图有简单的验证提示功能代码思路也比较简单输入框失去焦点时便检测，并进行处理表单具有 onsubmit = return check()行为，处理验证情况点击提交表单按钮时，进行最终的验证，达

2、到是否通过表单提交的请求。先是最基本的html+css部分 style type=text/css bodymargin:0;padding: 0; .loginposition:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333; .login legendfont-weight: bold;color: green;text-align: center; .login labeldisplay:inline-block;width:130px;text-a

3、lign: right; .btnheight: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right; inputheight: 20px;width: 170px; .borderRedborder: 1px solid red; imgdisplay: none; style head body div class=login form name=form method=post action=register.php

4、onsubmit=return check() legend【Register】legend plabel for=nameUserName: label input type=text id=name img src=./img/gou.png width=20px height=20pxp plabel for=passwordPassword: label input type=password id=password img src=./img/gantan.png width=20px height=20pxp plabel for=R_passwordPassword Again:

5、 label input type=password id=R_password img src=./img/gou.png width=20px height=20pxp plabel for=emailEmail: label input type=text id=email img src=./img/gou.png width=20px height=20pxp pinput type=submit value=Register class=btnp form div然后是js的class相关处理函数 function hasClass(obj,cls) / 判断obj是否有此clas

6、s return obj.className.match(new RegExp(s|) + cls + (s|$); function addClass(obj,cls) /给 obj添加class if(!this.hasClass(obj,cls) obj.className += +cls; function removeClass(obj,cls) /移除obj对应的class if(hasClass(obj,cls) var reg = new RegExp(s|) + cls + (s|$); obj.className = obj.className.replace(reg, )

7、; 然后是验证各个输入框的值 function checkName(name) /验证name if(name != ) /不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确 removeClass(ele.name,borderRed); /移除class document.images0.setAttribute(src,./img/gou.png); /对应图标 document.images0.style.display = inline; /显示 return true; else /name不符合 addClass(ele.name,borderRed); /添加

8、class document.images0.setAttribute(src,./img/gantan.png); /对应图标 document.images0.style.display = inline; /显示 return false; function checkPassw(passw1,passw2) /验证密码 if(passw1 = | passw2 = | passw1 != passw2) /两次密码输入不为空且不等 不符合 addClass(ele.password,borderRed); addClass(ele.R_password,borderRed); docu

9、ment.images1.setAttribute(src,./img/gantan.png); document.images1.style.display = inline; document.images2.setAttribute(src,./img/gantan.png); document.images2.style.display = inline; return false; else /密码输入正确 removeClass(ele.password,borderRed); removeClass(ele.R_password,borderRed); document.imag

10、es1.setAttribute(src,./img/gou.png); document.images1.style.display = inline; document.images2.setAttribute(src,./img/gou.png); document.images2.style.display = inline; return true; function checkEmail(email) /验证邮箱 var pattern = /(.a-zA-Z0-9_-)+(a-zA-Z0-9_-)+(.a-zA-Z0-9_-)+/; if(!pattern.test(email)

11、 /email格式不正确 addClass(ele.email,borderRed); document.images3.setAttribute(src,./img/gantan.png); document.images3.style.display = inline; ele.email.select(); return false; else /格式正确 removeClass(ele.email,borderRed); document.images3.setAttribute(src,./img/gou.png); document.images3.style.display =

12、inline; return true; 然后为各个输入框添加监听事件： var ele = /存放各个input字段obj name: document.getElementById(name), password: document.getElementById(password), R_password: document.getElementById(R_password), email: document.getElementById(email) ; ele.name.onblur = function() /name失去焦点则检测 checkName(ele.name.value

13、); ele.password.onblur = function() /password失去焦点则检测 checkPassw(ele.password.value,ele.R_password.value); ele.R_password.onblur = function() /R_password失去焦点则检测 checkPassw(ele.password.value,ele.R_password.value); ele.email.onblur = function() /email失去焦点则检测 checkEmail(ele.email.value); 最后就是点击提交注册时调用的

14、check()函数了function check() /表单提交则验证开始 var ok = false; var nameOk = false; var emailOk = false; var passwOk = false; if(checkName(ele.name.value) nameOk = true; /验证name if(checkPassw(ele.password.value,ele.R_password.value) passwOk = true; /验证password if(checkEmail(ele.email.value) emailOk = true; /验

15、证email if(nameOk & passwOk & emailOk) alert(Tip: Register Success .); /注册成功 /return true; return false; /有误，注册失败 完整代码：html xmlns=http:/www.w3.org/1999/xhtmlheadmeta charset=utf-8meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1titleRegistertitlemeta name=description content=meta name=keywords

16、 content=link href= rel=stylesheetstyle type=text/css bodymargin:0;padding: 0; .loginposition:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333; .login legendfont-weight: bold;color: green;text-align: center; .login labeldisplay:inline-block;width:130px;te

17、xt-align: right; .btnheight: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right; inputheight: 20px;width: 170px; .borderRedborder: 1px solid red; imgdisplay: none;styleheadbody div class=login form name=form method=post action=register.php

18、 onsubmit=return check() legend【Register】legend plabel for=nameUserName: label input type=text id=name img src=./img/gou.png width=20px height=20pxp plabel for=passwordPassword: label input type=password id=password img src=./img/gantan.png width=20px height=20pxp plabel for=R_passwordPassword Again

19、: label input type=password id=R_password img src=./img/gou.png width=20px height=20pxp plabel for=emailEmail: label input type=text id=email img src=./img/gou.png width=20px height=20pxp pinput type=submit value=Register class=btnp form div script type=text/javascript function hasClass(obj,cls) / 判

20、断obj是否有此class return obj.className.match(new RegExp(s|) + cls + (s|$); function addClass(obj,cls) /给 obj添加class if(!this.hasClass(obj,cls) obj.className += +cls; function removeClass(obj,cls) /移除obj对应的class if(hasClass(obj,cls) var reg = new RegExp(s|) + cls + (s|$); obj.className = obj.className.re

21、place(reg, ); function checkName(name) /验证name if(name != ) /不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确 removeClass(ele.name,borderRed); /移除class document.images0.setAttribute(src,./img/gou.png); /对应图标 document.images0.style.display = inline; /显示 return true; else /name不符合 addClass(ele.name,borderRed); /添加c

22、lass document.images0.setAttribute(src,./img/gantan.png); /对应图标 document.images0.style.display = inline; /显示 return false; function checkPassw(passw1,passw2) /验证密码 if(passw1 = | passw2 = | passw1 != passw2) /两次密码输入不为空且不等 不符合 addClass(ele.password,borderRed); addClass(ele.R_password,borderRed); docum

23、ent.images1.setAttribute(src,./img/gantan.png); document.images1.style.display = inline; document.images2.setAttribute(src,./img/gantan.png); document.images2.style.display = inline; return false; else /密码输入正确 removeClass(ele.password,borderRed); removeClass(ele.R_password,borderRed); document.image

24、s1.setAttribute(src,./img/gou.png); document.images1.style.display = inline; document.images2.setAttribute(src,./img/gou.png); document.images2.style.display = inline; return true; function checkEmail(email) /验证邮箱 var pattern = /(.a-zA-Z0-9_-)+(a-zA-Z0-9_-)+(.a-zA-Z0-9_-)+/; if(!pattern.test(email)

25、/email格式不正确 addClass(ele.email,borderRed); document.images3.setAttribute(src,./img/gantan.png); document.images3.style.display = inline; ele.email.select(); return false; else /格式正确 removeClass(ele.email,borderRed); document.images3.setAttribute(src,./img/gou.png); document.images3.style.display = i

26、nline; return true; var ele = /存放各个input字段obj name: document.getElementById(name), password: document.getElementById(password), R_password: document.getElementById(R_password), email: document.getElementById(email) ; ele.name.onblur = function() /name失去焦点则检测 checkName(ele.name.value); ele.password.o

27、nblur = function() /password失去焦点则检测 checkPassw(ele.password.value,ele.R_password.value); ele.R_password.onblur = function() /R_password失去焦点则检测 checkPassw(ele.password.value,ele.R_password.value); ele.email.onblur = function() /email失去焦点则检测 checkEmail(ele.email.value); function check() /表单提交则验证开始 var

28、 ok = false; var nameOk = false; var emailOk = false; var passwOk = false; if(checkName(ele.name.value) nameOk = true; /验证name if(checkPassw(ele.password.value,ele.R_password.value) passwOk = true; /验证password if(checkEmail(ele.email.value) emailOk = true; /验证email if(nameOk & passwOk & emailOk) alert(Tip: Register Success .); /注册成功 /return true; return false; /有误，注册失败 scriptbodyhtml以上所述就是本文的全部内容了，希望能够对大家学习javascript表单验证有所帮助。