javascript制作的简单注册模块表单验证.docx
《javascript制作的简单注册模块表单验证.docx》由会员分享，可在线阅读，更多相关《javascript制作的简单注册模块表单验证.docx（12页珍藏版）》请在冰点文库上搜索。
javascript制作的简单注册模块表单验证
javascript制作的简单注册模块表单验证
javascript制作的简单注册模块表单验证通常在我们的HTML页面表单中有大量的数据验证工作，免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。
很多程序员也会经常遗漏这项工作。
所以写了这一段JavaScript代码提供给大家使用。
使用起来很简单，大家拿回去自由扩展吧
一个注册框进行表单验证处理
如图有简单的验证提示功能
代码思路也比较简单
输入框失去焦点时便检测，并进行处理
表单具有onsubmit="returncheck（）"行为，处理验证情况
点击提交表单按钮时，进行最终的验证，达到是否通过表单提交的请求。
先是最基本的html+css部分
styletype="text/css">
body{margin:
0;padding:
0;}
.login{position:
relative;margin:
100pxauto;padding:
50px20px;width:
350px;height:
200px;border:
1pxsolid#333;}
.loginlegend{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;float:
right;}
input{height:
20px;width:
170px;}
.borderRed{border:
1pxsolidred;}
img{display:
none;}
style>
head>
body>
divclass="login">
formname="form"method="post"action="register.php"onsubmit="returncheck（）">
legend>【Register】legend>
p>labelfor="name">UserName:
label>
inputtype="text"id="name">
imgsrc="./img/gou.png"width="20px"height="20px">p>
p>labelfor="password">Password:
label>
inputtype="password"id="password">
imgsrc="./img/gantan.png"width="20px"height="20px">p>
p>labelfor="R_password">PasswordAgain:
label>
inputtype="password"id="R_password">
imgsrc="./img/gou.png"width="20px"height="20px">p>
p>labelfor="email">Email:
label>
inputtype="text"id="email">
imgsrc="./img/gou.png"width="20px"height="20px">p>
p>inputtype="submit"value="Register"class="btn">p>
form>
div>
然后是js的class相关处理函数
functionhasClass（obj,cls）{//判断obj是否有此class
returnobj.className.match（newRegExp（'（\\s|^）'+cls+'（\\s|$）'））;
}
functionaddClass（obj,cls）{//给obj添加class
if（!
this.hasClass（obj,cls））{
obj.className+=""+cls;
}
}
functionremoveClass（obj,cls）{//移除obj对应的class
if（hasClass（obj,cls））{
varreg=newRegExp（'（\\s|^）'+cls+'（\\s|$）'）;
obj.className=obj.className.replace（reg,""）;
}
}
然后是验证各个输入框的值
functioncheckName（name）{//验证name
if（name!
=""）{//不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确
removeClass（ele.name,"borderRed"）;//移除class
document.images[0].setAttribute（"src","./img/gou.png"）;//对应图标
document.images[0].style.display="inline";//显示
returntrue;
}else{//name不符合
addClass（ele.name,"borderRed"）;//添加class
document.images[0].setAttribute（"src","./img/gantan.png"）;//对应图标
document.images[0].style.display="inline";//显示
returnfalse;
}
}
functioncheckPassw（passw1,passw2）{//验证密码
if（passw1==""||passw2==""||passw1!
==passw2）{//两次密码输入不为空且不等不符合
addClass（ele.password,"borderRed"）;
addClass（ele.R_password,"borderRed"）;
document.images[1].setAttribute（"src","./img/gantan.png"）;
document.images[1].style.display="inline";
document.images[2].setAttribute（"src","./img/gantan.png"）;
document.images[2].style.display="inline";
returnfalse;
}else{//密码输入正确
removeClass（ele.password,"borderRed"）;
removeClass（ele.R_password,"borderRed"）;
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";
returntrue;
}
}
functioncheckEmail（email）{//验证邮箱
varpattern=/^（[\.a-zA-Z0-9_-]）+@（[a-zA-Z0-9_-]）+（\.[a-zA-Z0-9_-]）+/;
if（!
pattern.test（email））{//email格式不正确
addClass（ele.email,"borderRed"）;
document.images[3].setAttribute（"src","./img/gantan.png"）;
document.images[3].style.display="inline";
ele.email.select（）;
returnfalse;
}else{//格式正确
removeClass（ele.email,"borderRed"）;
document.images[3].setAttribute（"src","./img/gou.png"）;
document.images[3].style.display="inline";
returntrue;
}
}
然后为各个输入框添加监听事件：
varele={//存放各个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.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）;
}
最后就是点击提交注册时调用的check（）函数了
functioncheck（）{//表单提交则验证开始
varok=false;
varnameOk=false;
varemailOk=false;
varpasswOk=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:
RegisterSuccess.."）;//注册成功
//returntrue;
}
returnfalse;//有误，注册失败
}
完整代码：
htmlxmlns="http:
//www.w3.org/1999/xhtml">
head>
metacharset="utf-8">
metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
title>Registertitle>
metaname="description"content="">
metaname="keywords"content="">
linkhref=""rel="stylesheet">
styletype="text/css">
body{margin:
0;padding:
0;}
.login{position:
relative;margin:
100pxauto;padding:
50px20px;width:
350px;height:
200px;border:
1pxsolid#333;}
.loginlegend{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;float:
right;}
input{height:
20px;width:
170px;}
.borderRed{border:
1pxsolidred;}
img{display:
none;}
style>
head>
body>
divclass="login">
formname="form"method="post"action="register.php"onsubmit="returncheck（）">
legend>【Register】legend>
p>labelfor="name">UserName:
label>
inputtype="text"id="name">
imgsrc="./img/gou.png"width="20px"height="20px">p>
p>labelfor="password">Password:
label>
inputtype="password"id="password">
imgsrc="./img/gantan.png"width="20px"height="20px">p>
p>labelfor="R_password">PasswordAgain:
label>
inputtype="password"id="R_password">
imgsrc="./img/gou.png"width="20px"height="20px">p>
p>labelfor="email">Email:
label>
inputtype="text"id="email">
imgsrc="./img/gou.png"width="20px"height="20px">p>
p>inputtype="submit"value="Register"class="btn">p>
form>
div>
scripttype="text/javascript">
functionhasClass（obj,cls）{//判断obj是否有此class
returnobj.className.match（newRegExp（'（\\s|^）'+cls+'（\\s|$）'））;
}
functionaddClass（obj,cls）{//给obj添加class
if（!
this.hasClass（obj,cls））{
obj.className+=""+cls;
}
}
functionremoveClass（obj,cls）{//移除obj对应的class
if（hasClass（obj,cls））{
varreg=newRegExp（'（\\s|^）'+cls+'（\\s|$）'）;
obj.className=obj.className.replace（reg,""）;
}
}
functioncheckName（name）{//验证name
if（name!
=""）{//不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确
removeClass（ele.name,"borderRed"）;//移除class
document.images[0].setAttribute（"src","./img/gou.png"）;//对应图标
document.images[0].style.display="inline";//显示
returntrue;
}else{//name不符合
addClass（ele.name,"borderRed"）;//添加class
document.images[0].setAttribute（"src","./img/gantan.png"）;//对应图标
document.images[0].style.display="inline";//显示
returnfalse;
}
}
functioncheckPassw（passw1,passw2）{//验证密码
if（passw1==""||passw2==""||passw1!
==passw2）{//两次密码输入不为空且不等不符合
addClass（ele.password,"borderRed"）;
addClass（ele.R_password,"borderRed"）;
document.images[1].setAttribute（"src","./img/gantan.png"）;
document.images[1].style.display="inline";
document.images[2].setAttribute（"src","./img/gantan.png"）;
document.images[2].style.display="inline";
returnfalse;
}else{//密码输入正确
removeClass（ele.password,"borderRed"）;
removeClass（ele.R_password,"borderRed"）;
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";
returntrue;
}
}
functioncheckEmail（email）{//验证邮箱
varpattern=/^（[\.a-zA-Z0-9_-]）+@（[a-zA-Z0-9_-]）+（\.[a-zA-Z0-9_-]）+/;
if（!
pattern.test（email））{//email格式不正确
addClass（ele.email,"borderRed"）;
document.images[3].setAttribute（"src","./img/gantan.png"）;
document.images[3].style.display="inline";
ele.email.select（）;
returnfalse;
}else{//格式正确
removeClass（ele.email,"borderRed"）;
document.images[3].setAttribute（"src","./img/gou.png"）;
document.images[3].style.display="inline";
returntrue;
}
}
varele={//存放各个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.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）;
}
functioncheck（）{//表单提交则验证开始
varok=false;
varnameOk=false;
varemailOk=false;
varpasswOk=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:
RegisterSuccess.."）;//注册成功
//returntrue;
}
returnfalse;//有误，注册失败
}
script>
body>
html>
以上所述就是本文的全部内容了，希望能够对大家学习javascript表单验证有所帮助。
升级会员 