//通过ID获取每个主标签对象
var UserName = $("#<%=UserName.ClientID %>");
var Password = $("#<%=Password.ClientID %>");
var PasswordAgain = $("#<%=PasswordAgain.ClientID %>");
var SchoolSelect = $("#SchoolSelect");
var QQ = $("#<%=QQ.ClientID %>");
//获得图片提示标签的对象
var testnameok = $("#testnameok");
testnameok.hide();
var testnameno = $("#testnameno");
testnameno.hide();
var testqiang = $("#testqiang");
testqiang.hide();
var testruo = $("#testruo");
testruo.hide();
var testPasswordok = $("#testPasswordok");
testPasswordok.hide();
var testPasswordno = $("#testPasswordno");
testPasswordno.hide();
var testQQok = $("#testQQok");
testQQok.hide();
var testQQno = $("#testQQno");
testQQno.hide();
//获得文子提示标签对象
var testshowname = $("#testshowname");
testshowname.hide();
var testshowpassword = $("#testshowpassword");
testshowpassword.hide();
var testshowpwdagain = $("#testshowpwdagain");
testshowpwdagain.hide();
var testshowschol = $("#testshowschol");
testshowschol.hide();
var testQQ = $("#testQQ");
testQQ.hide();
//设置每个对象的onblur事件(对象失去焦点时发生),并调用各自的方法
UserName.blur = checkUsername;
alert(UserName.blur);
Password.blur = checkPassword;
PasswordAgain.blur = checkConfirm;
SchoolSelect.blur = checkSchool;
QQ.blur = checkQQ;
//每个onblur事件的方法,5个方法
//判断用户名是否已存在,并作用户名验证
function checkUsername() {
alert("我是checkUsername");
var username = trim(UserName.val()); //除去前后空格
var usernameRegex = /^[a-zA-Z_]\w{0,9}$/; //用户名格式
if (username == null || username == "") {
testshowname.hide();
testshowname.text("用户名必须填写!").show();
return false;
}
else if (!usernameRegex.test(username)) {
testshowname.hide();
testshowname.text("用户名格式不正确!").show();
return false;
}
else {
$.post("IsHavedUserName.ashx", { "UserName": username }, function (data, status) {
if (status != "success") {
alert("网络链接有误,请稍后再试!");
return false;
} else if (data != "false") {
testnameno.hide(); //隐藏no
testnameok.hide().show(); //先隐藏,后显示
return true;
} else {
testnameok.hide(); //先隐藏ok
testshowname.hide();
testshowname.text("用户名已存在,请另选用户名!").show();
testnameno.hide().show();
return false;
}
});
}
} //判断用户名是否已存在
//判断密码是否正确
function checkPassword() {
alert("我是Password");
var PasswordValue = Password.value;
var passwordRegex = /^\w{6,10}$/;
if (!passwordValue) {
testshowpassword.hide().text("密码不能为空!").show();
testpasswordok.hide(); //先隐藏ok
testpasswordno.hide().show();
return false;
}
else
if (!passwordRegex.test(passwordValue)) {
testshowpassword.hide().text("密码字数在6~10位之间!").show();
testpasswordok.hide(); //先隐藏ok
testpasswordno.hide().show();
return false;
}
else {
testpasswordno.hide();
testpasswordok.hide(); //先隐藏ok
return true;
}
}; //判断密码验证
//两次密码是否一致验证
function checkConfirm() {
alert("我是Confirm");
var confirmValue = PasswordAgain.value;
var passwordValue = Password.value;
if (!confirmValue) {
testshowpwdagain.hide().test("确认密码必须填写!").show();
testqiang.hide();
testruo.hide().show();
return false;
}
else if (confirmValue != passwordValue) {
testshowpwdagain.hide().test("密码必须一致!").show();
testqiang.hide();
testruo.hide().show();
return false;
}
else {
testruo.hide();
testqiang.hide().show();
return true;
}
}
//验证学校是否选择
function checkSchool() {
alert("我是School");
if (!SchoolSelect.val() > 0) {
testshowschol.hide().text("学校必须选择!").show();
return false;
}
}
//验证QQ格式是否正确
function checkQQ() {
alert("我是checkQQ");
var QQValue = QQ.val();
if (QQValue != null || QQValue != "") {
var QQRegex = /^\w{6,20}$/;
if (!QQRegex.test(QQValue)) {
testQQ.hide().text("QQ号格式不正确!").show();
testQQok.hide(); //先隐藏ok
testQQno.hide().show();
return false;
}
} else {
return true;
}
}
//去除用户名前后的空格
function trim(s) {
return s.replace(/^\s+|\s+$/g, "");
}
//获取表单对象,并且为表单提交事件写个方法
var formLogin = $("#formLogin");
formLogin.onsubmit = function () {
alert("我是formLogin");
var bUsername = checkUsername();
var bPassword = checkPassword();
var bConfirm = checkConfirm();
var bQQ = checkQQ();
var bSchool = checkSchool();
//如果,每个上面的每个对象,验证成功,则还回true
return bUsername && bPassword && bConfirm && bQQ && bSchool;
}
});
<body>
<form id="formLogin" runat="server">
<asp:TextBox ID="UserName" name="UserName" type="text" Style="height: 24px;" size="25"
runat="server"></asp:TextBox>
<img id="testnameok" name="testnameok" alt="testok" src="image/ok.gif"/>
<img id="testnameno" name="testnameno" alt="" src="image/no.gif"/>
<span id="testshowname" style="color: #d64554; overflow: hidden; font-weight: bold; font-size: 15px; font-family: 隶书_GB2312;"></span>
<asp:TextBox ID="Password" name="Password" type="password" Style="height: 24px;"
size="25" MaxLength="18 " runat="server"></asp:TextBox>
<img id="testPasswordok" name="testPasswordok" alt="testok" src="image/ok.gif"/>
<img id="testPasswordno" name="testPasswordno" alt="" src="image/no.gif"/>
<span id="testshowpassword" style="color: #d64554; overflow: hidden; font-weight: bold; font-size: 15px; font-family: 隶书_GB2312;"></span>
<asp:TextBox ID="PasswordAgain" name="PasswordAgain" type="password" Style="height: 24px;"
size="25" runat="server"></asp:TextBox>
<img id="testqiang" name="testqiang" alt="" src="image/ok.gif"/>
<img id="testruo" name="testruo" alt="" src="image/no.gif"/>
<span id="testshowpwdagain" style="color: #d64554; overflow: hidden; font-weight: bold; font-size: 15px; font-family: 隶书_GB2312;"></span>
<select id="ProvinceSelect" name="ProvinceSelect">
<option value="0" selected="selected">--请选择省份-- </option>
</select>
<select id="SchoolSelect" name="SchoolSelect">
<option value="0" selected="selected">--请选择学校--</option>
</select>
<span id="testshowschol" style="color: #d64554; overflow: hidden; font-weight: bold; font-size: 15px; font-family: 隶书_GB2312;"></span>
<asp:TextBox ID="QQ" name="QQ" type="text" Style="height: 24px;" size="25" runat="server"></asp:TextBox>
<img id="testQQok" name="testQQok" alt="" src="image/ok.gif"/>
<img id="testQQno" name="testQQno" alt="" src="image/no.gif"/>
<span id="testshowQQ" style="color: #d64554; overflow: hidden; font-weight: bold; font-size: 15px; font-family: 隶书_GB2312;"></span>
<asp:Button ID="btnRegister" runat="server" Text="注册"/>
</html>
[/size]