<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script type="text/javascript">
$.validator.setDefaults({
debug: true,
success: "valid",
submitHandler: function() { alert("success!"); }
});
//下面是验证类的扩展方法
jQuery.validator.addMethod("checkName",function(value,element,param){
// 正则不能写错。
var pattern = /^[a-zA-Z][a-zA-Z0-9_]+$/;
if(value != ''){
if(!pattern.test(value))
{
return false;
}
}
return true;
},"5～20个字母或数字,首位以字母开头");
$(document).ready(function() {
// validate signup form on keyup and submit
$("#commentForm").validate({
rules: {
uname: {
//required: true,
checkName:true,
minlength: 4
},
txtPwd: {
required: true,
minlength: 6,
maxlength: 6
},
txtPwd2: {
required: true,
minlength: 6,
maxlength: 6,
equalTo: "#txtPwd"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
uname: {
required: "用户名不能为空",
minlength: "用户名长度不能小于5个字符"
},
txtPwd: {
required: "请填写您的密码！",
minlength: "密码必须是六位字符！",
maxlength: "密码必须是六位字符！"
},
txtPwd2: {
required: "请填写确认密码！",
minlength: "确认密码必须是六位字符！",
maxlength: "确认密码必须是六位字符！",
equalTo: "两次密码不一致"
},
email: "请输入正确的email地址",
agree: "Please accept our policy"
}
});
});
</script>
<style type="text/css">
#commentForm { width: 500px; }
#commentForm label { width: 250px; }
#commentForm label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
</style>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="unname">用户名</label>
<input id="uname" name="uname" minlength="5" type="text" required />
</p>
<p>
<label for="cpassword">密码 (required)</label>
<input id="txtPwd" name="txtPwd" type="text" />
</p>
<p>
<label for="cconfirm_password">重复密码</label>
<input id="txtPwd2" name="txtPwd2" type="text" />
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" type="email" name="email" required />
</p>
<p>
<label for="curl">URL地址</label>
<input id="curl" type="url" name="url" />
</p>
<p>
<label for="ccomment">你的评论</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>jquery 验证类，基本上复合中国国情了，还有需要的就自己添加吧，这里没有加入成功或者失败的回调，不过不难，相信各位一定都会，随便转，哈哈
