JS:客户端表单验证

来源：互联网发布：淘宝评价保留几个月编辑：程序博客网时间：2024/06/04 18:42

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN">

<html>

<head>

<title>客户端表单验证</title>

body{

text-align:center;

}

.show{

display:block;

color:red;

font-weight:bold;

}

.hide{

display:none;

}

input{

width:160;

}

</style>

<scripttype="text/javascript">

var pwd; //密码

function check(){

if(checkLastName()&&checkFirstName()&&checkPwd()&&checkEmail()&&checkRepwd()){

return true;

}else{

return false;

}

function checkLastName(){

var lastName =document.getElementByIdx_x("lastName").value;

if(lastName.length==""){

document.getElementByIdx_x("lastNameErr").innerHTML="名字不能为空";

document.getElementByIdx_x("lastNameErr").className="show";

return false;

}else{

for(var i=0;i<lastName.length;i++){

if(isNaN(lastName.substring(i,i+1))==false){

document.getElementByIdx_x("lastNameErr").innerHTML="名字不能包含数字";

document.getElementByIdx_x("lastNameErr").className="show";

return false;

}else{

document.getElementByIdx_x("lastNameErr").innerHTML="";

return true;

}

function checkFirstName(){

var firstName =document.getElementByIdx_x("firstName").value;

if(firstName.length==""){

document.getElementByIdx_x("firstNameErr").innerHTML="姓氏不能为空";

document.getElementByIdx_x("firstNameErr").className="show";

return false;

}else{

for(var i=0;i<firstName.length;i++){

if(isNaN(firstName.substring(i,i+1))==false){

document.getElementByIdx_x("firstNameErr").innerHTML="姓氏不能包含数字";

document.getElementByIdx_x("firstNameErr").className="show";

return false;

}else{

document.getElementByIdx_x("firstNameErr").innerHTML="";

return true;

}

function checkPwd(){

pwd = document.getElementByIdx_x("pwd").value;

if(pwd.length<6){

document.getElementByIdx_x("pwdErr").innerHTML="密码不能小于6位";

document.getElementByIdx_x("pwdErr").className="show";

return false;

}else{

document.getElementByIdx_x("pwdErr").className="hide";

return true;

}

function checkRepwd(){

var repwd = document.getElementByIdx_x("repwd").value;

if(repwd==""){

document.getElementByIdx_x("repwdErr").innerHTML="请确认密码";

document.getElementByIdx_x("repwdErr").className="show";

return false;

}else{

if(repwd==pwd){

document.getElementByIdx_x("repwdErr").className="hide";

return true;

}else{

document.getElementByIdx_x("repwdErr").innerHTML="两次密码不一致";

document.getElementByIdx_x("repwdErr").className="show";

return false;

}

function checkEmail(){

var email = document.getElementByIdx_x("email").value;

var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

if(reg.test(email)){

document.getElementByIdx_x("emailErr").className="hide";

return true;

}else{

document.getElementByIdx_x("emailErr").innerHTML="邮箱格式不正确";

document.getElementByIdx_x("emailErr").className="show";

return false;

}

</script>

</head>

<body>

<tr>

<tdstyle="text-align:right;">名字：</td>

<tdstyle="width:350px"><inputtype="text" id="lastName" onblur="checkLastName()"style="float:left;" /><divclass="hide"id="lastNameErr"></div></td>

</tr>

<tr>

<tdstyle="text-align:right;">姓氏：</td>

<tdstyle="width:350px"><inputtype="text" id = "firstName" style="float:left;"onblur="checkFirstName()"/><divclass="hide"id="firstNameErr"></div></td>

</tr>

<tr>

<tdstyle="text-align:right;">登录名：</td>

<tdstyle="width:350px"><inputtype="text" id="loginName"/></td>

</tr>

<tr>

<tdstyle="text-align:right;">密码：</td>

<tdstyle="width:350px"><inputtype="password" id="pwd" style="float:left;" onblur="checkPwd()"/><div class="hide"id="pwdErr"></div></td>

</tr>

<tr>

<tdstyle="text-align:right;">再次确认密码：</td>

<tdstyle="width:350px"><inputtype="password" id="repwd" onblur="checkRepwd()"style="float:left;" /><divclass="hide"id="repwdErr"></div></td>

</tr>

<tr>

<tdstyle="text-align:right;">电子邮箱：</td>

<tdstyle="width:350px"><inputtype="text" id="email" onblur="checkEmail()" style="float:left;"/><div class="hide"id="emailErr"></div></td>

</tr>

<tr>

</td >

<td>

</td>

</tr>

</table>

</form>

</body>

</html>