<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<form method="post" action="#" οnsubmit="adaptValue();">
<table width="500" border="0">
<tr>
<td width="100px">用户名</td>
<td class="input" width="200"><input type="text" name="username" id="username" οnblur="v_username();" οnkeyup="v_username();"/></td>
<td><span class="username"></span></td>
</tr>
<tr>
<td>密码</td>
<td class="input"><input type="password" name="password" id="password" οnblur="v_password();" οnkeyup="v_password();"/></td>
<td><span class="password"></span></td>
</tr>
<tr>
<td>确认密码</td>
<td class="input"><input type="password" name="password1" id="password1" οnblur="v_password1();" οnkeyup="v_password1();"/></td>
<td><span class="password1"></span></td>
</tr>
<tr>
<td>邮箱</td>
<td class="input"><input type="text" name="account" id="account" οnblur="v_account();" οnkeyup="v_account();"/></td>
<td><span class="account"></span></td>
</tr>
<tr>
<td>性别</td>
<td class="input"><select name="sex" οnblur="v_sex();" οnchange="v_sex();" id="sex"><option value="">请选择</option><option value="1">男</option><option value="2">女</option></select></td>
<td><span class="sex"></span></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" id="submit" value="提交" disabled="disabled"/></td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
function enableSubmit(bool){
if(bool)$("#submit").removeAttr("disabled");
else $("#submit").attr("disabled","disabled");
}
//验证多少项,多少个false
var flags = [false,false,false,false,false];
//flags全为true时提交按钮解除禁用
function v_submitbutton(){
for(f in flags) if(!flags[f]) {
enableSubmit(false);
return;
}
enableSubmit(true);
}
//
//邮箱验证的正则
var RegEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
//输出验证 name为表单后面span的class,msg为输出的内容
function lineState(name,msg){
$("."+name).text(msg);
}
//各个表单去验证
function v_username(){
var username = $("#username").val();
if(username=="") { flags[0]=false;enableSubmit(false);}
else{flags[0] = true;}
v_submitbutton();
}
function v_password(){
var password = $("#password").val();
if(password=="") { flags[1]=false;enableSubmit(false);}
else{flags[1] = true;}
v_submitbutton();
}
function v_password1(){
var password = $("#password").val();
var password1 = $("#password1").val();
if(password!=password1){lineState("password1","两次密码不一样"); flags[2]=false;enableSubmit(false);}
else{lineState("password1","");flags[2] = true;}
v_submitbutton();
}
function v_account(){
var account = $("#account").val();
if(!RegEmail.test(account)) {lineState("account","邮箱格式不正确"); flags[3]=false;enableSubmit(false);}
else{lineState("account","");flags[3] = true;}
v_submitbutton();
}
function v_sex(){
var sex = $("#sex").val();
if(sex=="") { flags[4]=false;enableSubmit(false);}
else{flags[4] = true;}
v_submitbutton();
}
function adaptValue(){
return true;
}
</script>