<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="signupForm" method="get" action="">
<div class="error"></div>
<p>
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname"/>
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email"/>
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password"/>
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password"/>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</form>
<input id="reset" type="button" value="重置表单"/>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
(function() {
$.validator.setDefaults({
debug: true
})
var validator = $("#signupForm").validate({
rules: {//验证规则
firstname: "required",
email: {
required: true,
email: true,
// remote: {//远端验证
// url: "check-email.php",
// type: "post",
// data: {
// username: function() {
// return $("#username").val();
// }
// }
// }
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {//错误消息
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: $.validator.format("密码不能小于{0}个字符")
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
},
// errorPlacement: function(error, element) {//显示错误消息的位置
// if (element.is(":radio"))
// error.appendTo(element.parent().next().next());
// else if (element.is(":checkbox"))
// error.appendTo(element.next());
// else
// error.appendTo(element.parent().next());
// },
// errorClass: "invalid", //错误消息框的类
// errorElement: "a", //错误消息框的元素
// errorContainer: "div.error", //当验证时显示或隐藏这个容器
// errorLabelContainer: "#signupForm div.error",//当验证时显示或隐藏这个容器
// wrapper: "li",//包裹住单条错误信息
// success: function(label) {//验证成功后的操作
// label.addClass("valid").text("Ok!")
// },
// onsubmit: false, //提交表单时验证
// onfocusout: false, //失去焦点是验证
// onkeyup: false,//这个好像不能用也许是我jquery版本太高了
submitHandler: function(form) {//处理程序
alert("submitted");
//form.submit();
}
});
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for (var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >= param[0] && length <= param[1]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
//重置错误信息
$("#reset").click(function() {
validator.resetForm();
});
//原文http://blog.csdn.net/phiberg/article/details/7344853?reload
})();
</script>
</body>
</html>