Jquery一个简单的注册验证-白红宇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

$(document).ready(function() {

//用户名离开焦点的判断

$("#textfirst").blur(function(){

var first=$(this).val(); //得到用戶名文本框的值

var rr=$(this).closest("tr").find("td:last");//得到這個文本框上的tr下面的最后一個td

if(first==""){//判斷如果 first 文本框的值等于空的話

rr.text("*用户名不能为空");//就在rr最後一個td裏面設置提示信息

}else if(first.length<6 || first.length>12){//如果长度小于6 或者是小于 12 就是不合法

rr.text("用户名长度不合法");

}

else{ //否则就给出正确的提示进行下一步验证密码

rr.text("√");

var pass;

var $tt;

$("#textpassword").blur(function(){//同上如果密码框失去焦点

pass=$(this).val(); //得到密码框的值

$tt=$(this).closest("tr").find("td:last"); //得到最后一个td

if(pass==""){ //开始验证判断是否为空

}else if(pass.length<6 || pass.length>12){ //判断密码框的长度

$tt.text("*密码长度不合法");

}else{//条件都符合就给出正确的提示信息再进行下一步

$tt.text("√");

//确认密码的一个验证

var Confirm;

var password;

$("#textquerenpassword").blur(function(){ //同上设置确认密码框失去焦点

Confirm=$(this).val();//得到第二次输入密码的值

password=$(this).closest("tr").find("td:last"); //得到最后一个id

if(Confirm==""){//开始验证判断为空性

password.text("*请再输入一次密码");

}else if(Confirm!=pass){//为空性通过后判断输入的值是否和上一次的密码相同

password.text("*与上一次输入的密码不符合!");

}else{ //通过以上判断后给出正确的提示信息然后再进行下一步性别的判断

password.text("√");

//性別

var radio=$("input:radio:checked").val();//首先得到性别单选框的值

if(radio==null){//然后判断为空性

$("input:radio").closest("tr").find("td:last").text("*请选择性别");

return false;

}else{

$("input:radio").closest("tr").find("td:last").text("√");//为空性通过后就给出正确的提示信息继续下一步验证年龄

//年龄

$("select").change(function(){//年龄的下拉框设置chang事件

var option=$(this).val();//得到它的值

if(option<6 || option>66){//判断小于6 或者大于66 就为不合法

$(this).closest("tr").find("td:last").text("*年龄不合法");

}else{

$(this).closest("tr").find("td:last").text("√");//否则就给出提示信息继续下一步验证地址

//地址

$("#textaddress").blur(function(){//地址文本框设置焦点离开

var add=$(this).val();//得到值

var address=$(this).closest("tr").find("td:last");//得到最后一个td

if(add==""){//开始验证判断为空性

address.text("*地址不能为空!");

}else if(add.length<20){//为空性通过后进行长度的判断

address.text("*地址长度不能小于20");

}else{//以上条件都通过后就给出正确提示信息然后进行最后一步验证邮箱

address.text("√");

//邮箱

$("#textemail").blur(function(){//首先还是一样给邮箱设置离开事件

var email=$(this).val();//得到输入邮箱的值

var eam=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/;//有正则表达式规则

var ea=$(this).closest("tr").find("td:last");//得到最后一个td

if(email==null){//开始验证还是先判断为空性

ea.text("*邮箱不能为空!");

}else if(!eam.exec(email)){//其次用正则表达式和输入邮箱的值进行匹配

ea.text("*邮箱格式不对!");

}else{//最后给出提示信息//点击提交

ea.text("√");

$("input[type=button]").click(function(){//提交事件

alert("恭喜你!注册成功!");

});

}

});

}

});

}

});

return true;

}

});}

});

</script>

<style>

table{

width:800px;

height:300px;

margin:0 auto;

border:1px solid rgba(100,100,100,0.5);

margin-top:50px;

}

table td:first-child{

text-align:right;

}

table td{

text-align:left;

border:0px solid;

height:30px;

width:80px;

}

table td:last-child{

text-align:right;

display:block;

border:0px solid;

width:100px;

height:30px;

}

float:left;

}

table td:last-child{

text-align:left;

border0px solid rgba(100,100,100,0.1);

font-size:13px;

color:red;

font-family:"楷体";

}

</style>

</head>

<!--注册页面

1.用户名

2.密码

3.确认密码

4.性别单选框

5.年龄

6.地址

7.电子邮件

6个选项首先判断不能允许为空

1.用户名长度6-12之间

2.密码长度6-12之间

3.确认密码长度6-12之间

4.密码与确认密码必须一致

5.年龄:必须在16-60之间

6.地址:长度20以上

7.验证邮件是否为合法邮箱

当验证的时候,在该元素的后面显示错误信息,用红色表示</strong>-->

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

for(var i=0;i<100;i++){

document.write("<option value="+i+">"+i+"</option>");

}

</script>

</select></td><td></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

//如有不足敬请谅解