JavaScript程序设计基础教程实训指导-8-2 实训案例名称：注册表单验证

实训案例名称注册表单验证

1.案例描述用JavaScript实现简单的注册模块表单验证

2.实现思路1首先利用html+css制作简单的注册模块界面，代码片段如下style type=text/cssbody{margin:0;padding:0;}.login{position:relative;margin:100px auto;padding:50px20px;width:350px;height:200px;border:1px solid#333;}.login legend{font-weight:bold;color:green;text-align:center;}.loginlabel{display:inline-block;width:130px;text-align:right;}.btn{height:30px;width:100px;padding:5px;border:0;background-color:#00dddd;font-weight:bold;cursor:pointer;margin-left:140px;}input{height:20px;width:170px;}.borderRed{border:2px solidred;}img{display:none;}/style/headbodydiv class=,login,form name=form”method=post action二register.html”onsubmit=nreturn checklegend[Register]/legendplabel for=nameHUserName:/labelinput type=,text id=name imgsrc=./img/gou.pngn width=20px height=20px/pplabel for=passwordPassword:/labelinput type=,password id=password imgsrc=,,./img/gantan.png,width=20pxM height=,,20px/pplabel for=uR_passwordPassword Again:/labelinput type=password id=R_password imgsrc=./img/gou.png width=20px height=20px/pplabel for=emairEmail:/labelinput type=,,textH id=email imgsrc=,,./img/gou.pngH width=,,20pxH height=,,20px,,x/ppinput type=submit”value=Register”class=btnn/p/form/div2添加JavaScript的class相关处理函数function hasClassobj,cls{//判断obj是否有此classreturn obj.className.matchnew RegExp\\s|A+cis+\\s|$*;function addClassobj,cls{〃给obj添加classif!this.hasClassobj,cls{obj.className+=+cls;function removeClassobj,cls{〃移除obj对应的classifhasClassobj,cls{var reg=new RegExp\\s|A*+cis+\\s|$;obj.className=obj.className.replacereg,H;3运用JavaScript验证各个输入框的值function checkNamename{〃验证nameifname!=巧{〃不为空则正确removeClassele.name,borderRed;//移除classdocument.images

[0].setAtt「ibutesrc,”./img/gou.png;〃对应图标document.images

[0].style.display=inline”;〃显示return true;}else{//name不符合addClassele.name,borderRed;〃添加classdocument.images

[0].setAttribute,src,./img/gantan.png;〃对应图标document.images

[0].style.display=inline”;〃显示return false;function checkPasswpassw1,passw2{〃验证密码ifpassw1==||passw2==H||passwl!==passw2{〃两次密码输入不为空且不等不符合addClassele.password,HborderRed;addClassele.R_password,borderRed;document.images

[1].setAttribute,,src,,,./img/gantan.pngn;document.images

[1].style.display=inline;document.images

[2].setAttribute”src,./img/gantan.png”；document.images

[2].style.display=Inline;return false;}else{〃密码输入正确removeClassele.password,borderRed;removeClassele.R_password,,,borderRedn;document.images

[1].setAttributesrc,./img/gou.pngM;document.images

[1].style.display=inline;document.images

[2].setAttribute,,src,,./img/gou.png;document.images

[2].style.display=inline;return true;function checkEmailemail{〃验证邮箱var pattern=/A[\.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+/;if!pattern.testemail{email格式不正确addClassele.email,borderRed;document.images^.setAttributeCsrcV./img/gantan.png;document.images

[3].style.display=inline;ele.email.select;return false;}else{〃格式正确removeClassele.email,borderRed*;document.images

[3].setAttribute,,src,,,./img/gou.png;document.images

[3].style.display=inline;return true;4为各个输入框添加监听事件var ele={〃存放各个input字段objname:document.getElementByldnamen,password:document.getElementByldCpassword*,R_password:document.getElementByldR_passwordn,email:document.getElementByldemair,ele.name.onblur=function{〃name失去焦点则检测checkNameele.name.value;ele.password.onblur=function{“password失去焦点贝ij检测checkPasswele.password.value,ele.R_password.value;ele.R_password.onblur=function{〃R_password失去焦点贝U检测checkPasswele.password.value,ele.R_password.value;ele.email.onblur=function{“email失去焦点则检测checkEmailele.email.value;5最后就是单击提交注册时触发form表单onsubmit事件从而调用check函数function check{//表单提交则验证开始var ok=false;var nameOk=false;var emailOk=false;var passwOk=false;ifcheckNameele.name.value{nameOk=true;}〃验证nameifcheckPasswele.password.value,ele.R_password.value{passwOk=true;}〃验证passwordifcheckEmailele.email.value{emailOk=true;}〃验证emailifnameOkpasswOkemailOk{alertfTip:Register Success〃注册成功//return true;return false;〃有误，注册失败完整代码如脚本8-6所示脚本8-

6.html!DOCTYPE htmlPUBLIC-//W3C//DTD XHTML

1.0Transitional〃EN”“http:〃www.w

3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdHhtml xmlns=charset=,,utf-8,meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1titleRegister/titlemeta name=description content=meta name=keywords content=,Hlink href=m,rel=Hstylesheetnstyle type=text/cssnbody{margin:0;padding:0;}.login{position:relative;margin:100px auto;padding:50px20px;width:350px;height:200px;border:1px solid#333;}.login legend{font-weight:bold;color:green;text-align:center;}.loginlabel{display:inline-block;width:130px;text-align:right;}.btn{height:30px;width:100px;padding:5px;border:0;background-color:#00dddd;font-weight:bold;cursor:pointer;margin-left:140px;}input{height:20px;width:170px;}.borderRed{border:2px solidred;}img{display:none;}/style/headbodydiv class=nloginHform name=formH method=post”action=register.html onsubmit=return checklegend[Register]/legendplabel for=nameUserName:/labelinput type=,,textn id=name imgsrc=./img/gou.pngM width=20px height=,,20px/pplabel for=passwordPassword:/labelinput type=password id=,passwordH imgsrc=./img/gantan.pngH width=20pxH height=H20px/pplabel for=R_passwordPassword Again:/labelinput type=,,password id=,,R_passwordn imgsrc=./img/gou.png width=,20pxH height=20px,,x/pplabel for=emairEmail:/labelinput type=,text id=email imgsrc=./img/gou.png width=,20pxn height=,20px,,/ppinput type=submit,value=Register class=btn,/p/form/divscript type=,text/javascriptnfunction hasClassobj,cls{//判断obj是否有此classreturn obj.className.matchnew RegExp\\s|A+cis+\\s|$*;function addClassobj,cls{〃给obj添力Uclassif!this.hasClassobj,cls{obj.className+=*+cls;function removeClassobj,cls{〃移除obj对应的class ifhasClassobj,cls{var reg=new RegExp\\s|A+cis+\\s|$;obj.className=obj.className.replacereg,;function checkNamename{〃验证nameifname!=巧{〃不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确removeClassele.name,borderRed;〃移除classdocument.images

[0].setAttribute“src”；/img/gou.png”；〃对应图标document.images

[0].style.display=inline”;〃显示return true;}else{//name不符合addClassele.name,borderRed;〃添力Uclassdocument.images

[0].setAttributesrc”J./img/gantan.png;//对应图标document.images

[0].style.display=inline”;〃显示return false;function checkPasswpassw1,passw2{〃验证密码ifpassw1==m|||passw2==||passwl!==passw2{//两次密码输入不为空且不等不符合addClassele.password,borderRed;addClassele.R_password,borderRed;document.images

[1].setAttributesrc,./img/gantan.png;document.images

[1].style.display=inline,;document.images

[2].setAttribute,,src,,./img/gantan.png;document.images

[2].style.display=inline;return false;}else{〃密码输入正确removeClassele.password,borderRed;removeClassele.R_password,nborderRed;document.images

[1].setAttribute“src,”./img/gou.png；document.images

[1].style.display=inline;document.images

[2].setAttribute,,src,./img/gou.png;document.images

[2].style.display=inline;return true;function checkEmailemail{〃验证邮箱var pattern=/A[\.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+/;if!pattern.testemail{〃email格式不正确addClassele.email,HborderRedn;document.images^.setAttributeCsrcV./img/gantan.png;document.images

[3].style.display=inline;ele.email.select;return false;}else{〃格式正确removeClassele.email,borderRed;document.images

[3].setAttribute,src,,,./img/gou.pngH;document.images

[3].style.display=inline;return true;var ele={〃存放各个input字段objname:document.getElementByldname,password:document.getElementByldpasswordK,R_password:document.getElementByldR_password,email:document.getElementByldemailele.name.onblur=function{//name失去焦点则检测checkNameele.name.value;ele.password.onblur=function{“password失去焦点贝检测checkPasswele.password.value,ele.R_password.value;ele.R_password.onblur=function{〃R_password失去焦点贝ij检测checkPasswele.password.value,ele.R_password.value;ele.email.onblur=function{//email失去焦点则检测checkEmailele.email.value;function check{〃表单提交则验证开始var ok=false;var nameOk=false;var emailOk=false;var passwOk=false;ifcheckNameele.name.value{nameOk=true;}〃验证nameifcheckPasswele.password.value,ele.R_password.value{passwOk=true;}〃验证passwordifcheckEmailele.email.value{emailOk=true;}〃验证emailifnameOkpasswOkemailOk{alertfTip:Register Success〃注册成功return true;return false;〃有误，注册失败/script/body/htmlregister.html!doctype htmlhtmllang=zh-CNheadtitleRegister/title/headbodyvh1恭喜您！注册成功！v/h1/body/html页面加载完成显示如图

8.14所示表单内容为空单击“Register”按钮显示如图

8.15所示表单内容填写正确后显示如图

8.16所示[Register]图

8.14案例8・1运行结果1图

8.15案例8-1运行结果2图

8.16案例8-1运行结果3。