求教Jquery表单验证功能

张文

这是基础测试的一道题，我想大家都遇到了吧。

编写HTML注册表单,，需要字段：

用户名,

密码,

确认密码,

邮件,

确认邮件,

性别(单选),

城市(下拉列表),

兴趣爱好(多选),

提交及重置按钮。

使用JavaScript验证HTML表单。要求如下：

1,“登录名”必须是字母数字或下划线, 不能以数字开头；

2,密码为6-16位字母、数字或者下划线.；

3,密码和确认密码一致；

4,邮件地址是正确的邮件地址格式；

5,邮件地址和确认邮件地址一致；
由于对javascript接触少，只写出了以下代码。
一直听说jquery非常便捷，“写的更少，但做的更多”，但一直没有系统学过，只是在做网页导航条、图片切换、日期选择的时候，用一些别人做好的插件
有没有大牛把上面的表单验证用jquery实现一下，给我们想学jquery的小虾一些参考。
上网也查到了一些jquery验证表单的资料，但看不懂，能不能推荐一些好的学习资料，如博文。拜谢{:soso_e196:}

<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>

复制代码

张文 · 张文

不错，学习了。谢谢。

杨深 · 杨深

我也来学习。

欧玉斌 · 欧玉斌

张文发表于 2012-10-27 22:30
不错，学习了。谢谢。

学习了，就加加分呗{:soso_e154:}

dqzg12300 · dqzg12300

我还准备进来看能帮到啥忙的呢。

欧玉斌 · 欧玉斌

dqzg12300 发表于 2012-10-28 19:15
我还准备进来看能帮到啥忙的呢。

没事没事，有空你也去发发帖啊，帮五期搞点人气

dqzg12300 · dqzg12300

我也在努力啦。！

帐号		自动登录	找回密码
密码			加入黑马

求教Jquery表单验证功能

评分

6 个回复