求教Jquery表单验证功能 - 黑马程序员技术交流社区

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表单验证</title>
<script type="text/javascript">
function checkInfo() {
/*验证登录名格式：登录名必须是字母数字或下划线, 不能以数字开头*/
var regexName = /^[^0-9][a-zA-Z0-9_]{1,}$/;
var userName = document.getElementById("userName");
if (!userName.value.match(regexName)) {
alert("用户名错误");
userName.value = "";
userName.focus();
window.event.returnValue = false;
return;
}
/*验证密码格式：密码为6-16位字母、数字或者下划线*/
var regexPwd = /^[a-zA-Z0-9_]{6,16}$/;
var pwd = document.getElementById("pwd");
var pwdCheck = document.getElementById("pwdCheck");
if (!pwd.value.match(regexPwd)) {
alert("密码格式错误");
pwd.value = "";
pwd.focus();
window.event.returnValue = false;
return;
}
/*验证密码和确认密码一致*/
if (pwdCheck.value != pwd.value){
alert("密码输入不一致");
pwdCheck.value = "";
pwdCheck.focus();
window.event.returnValue = false;
return;
}
/*验证邮箱格式*/
var regexEmail = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
var email = document.getElementById("email");
var emailCheck = document.getElementById("emailCheck");
if (!email.value.match(regexEmail))
{
alert("邮箱格式错误");
email.value = "";
email.focus();
window.event.returnValue = false;
return;
}
/*验证邮箱输入是否一致*/
if (emailCheck.value != email.value){
alert("邮箱输入不一致");
emailCheck.value = "";
emailCheck.focus();
window.event.returnValue = false;
return;
}
if(window.event.returnValue=true)
alert("提交成功");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="800" border="0">
<tr>
<td width="130">用户名：</td>
<td ><input id="userName" type="text" />（用户名必须是字母数字或下划线，不能以数字开头）</td>
</tr>
<tr>
<td>密码：</td>
<td><input id="pwd" type="password"/>（密码必须是6-16位字母、数字或下划线）</</td>
</tr>
<tr>
<td>确认密码：</td>
<td><input id="pwdCheck" type="password" /></td>
</tr>
<tr>
<td>邮件：</td>
<td><input id="email" type="text" /></td>
</tr>
<tr>
<td>确认邮件：</td>
<td><input id="emailCheck" type="text" /></td>
</tr>
<tr>
<td>性别：</td>
<td><input name="sex" type="radio" value="" />男
<input name="sex" type="radio" value="" />女</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="">
<option value ="nanning">南宁</option>
<option value ="guiling">桂林</option>
<option value="liuzhou">柳州</option>
<option value="yuling">玉林</option>
</select></td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input type="checkbox" name="movie"/>看电影
<input type="checkbox" name="game"/>玩游戏
<input type="checkbox" name="game"/>看书
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="提交" onclick="checkInfo()" />
<input type="reset" name="reset" value="重置" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</form>
</body>
</html>

复制代码