jQuery验证插件的例子（ 表单验证vs2013）
1 插件支持IE8及以上的版本，不再支持IE6、7；
2 使用范围：企业级别的系统开发（用户数目几十到几千人也行），统一安装IE8以上的浏览器即可；
3 如果是企业级宣传网站，则不能使用；
html：
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery.validate.js"></script>
<!--<script src="js/jquery-migrate-1.2.1.js"></script>-->
<script type="text/javascript">
$(function () {
$("#reg").validate({
//验证成功后,提交数据,使用AJAX提交
submitHandler: function (form) {
$.ajax({
type: "post",
url: "Submit.aspx",
data: $(form).serialize(),
success: function (response, status, xhr) {
if (response == "ok") {
window.location = "HtmlPage2.html";
}
else {
alert("注册失败!");
}
},
error: function () {
alert("ajax服务器错误!");
}
});
},
//验证成功,添加一个对号图片
success: function (lable) {
lable.html('<img src="../img/aa.png" alt="" />');
},
//验证规则
rules: {
userName: {
required: true,//不为空
remote: "Ajax.aspx?action=dan"
},
pwd: {
required: true,//不为空
minlength: "6",
},
confirmPwd: {
required: true,
equalTo: "#userPwd"//和密码是否相等
},
email: {
required: true,
email: true
},
tsPwd: {
required: true,
geshi:true
}
},
messages: {
userName: {
required: '<span class="errorMes">用户名不能为空!</span>',
remote: '<span class="errorMes">用户名已存在,请重新输入!</span>',
},
pwd: {
required: '<span class="errorMes">密码不能为空!</span>',
minlength: jQuery.format('<span class="errorMes">密码不能少于{0}位!</span>'),
},
confirmPwd: {
required: '<span class="errorMes">确认密码不能为空!</span>',
equalTo: '<span class="errorMes">密码不一致，请重新输入!</span>'
},
email: {
required: '<span class="errorMes">邮箱不能为空!</span>',
email: '<span class="errorMes">邮箱格式不正确!</span>'
},
tsPwd: {
required: '<span class="errorMes">不能为空!</span>',
}
}
});
////单独添加
//$("#tsPwd").rules("add", {
// required: true,
// geshi: true,
// messages: {
// required: '<span class="errorMes">不能为空!</span>',
// }
//});
//自定义验证规则
$.validator.addMethod("geshi", function (value,element) {
var reg = /^((\w*\d\w*[a-z]\w*)|(\w*[a-z]\w*\d\w*))$/i;
return this.optional(element)||(reg.test(value));
},'必须是数字和字母或下划线的组合!');
});
</script>
<style type="text/css">
.star, .errorMes {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form id="reg" >
<input type="hidden" name="action" value="ChaJianVal" />
<p>用户名:<input id="userName" type="text" name="userName" /><label id="isExist"></label><span class="star">*</span></p>
<p>密码:<input id="userPwd" type="text" name="pwd" /><span class="star">*</span></p>
<p>确认密码:<input type="text" name="confirmPwd" /><span class="star">*</span></p>
<p>邮箱:<input type="text" name="email" /><span class="star" >*</span></p>
<p>特殊密码:<input type="text" name="tsPwd" id="tsPwd" /><span class="star">*</span></p>
<p><input id="sub" type="submit" value="提交" /></p>
</form>
</body>
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
