使用JQuery插件Validate对表单进行校验
引入插件Validate
在web工程中引入validate 工具包
引入js文件。
<!-- 加入jQuery -->
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<!-- 加入jQuery插件 -->
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
对表单进行校验
基本语法:
<script type="text/javascript">
$(function(){
$("#checkForm").validate({
rules:{
},
messages:{
}
});
});
</script>
validate的rules和Messages表示校验规则和错误信息,均为JSON格式。
示例:
<script type="text/javascript">
$(function(){
$("#checkForm").validate({
rules:{
"username":{
"required":true
}
},
messages:{
"username":{
"required":"抱歉,用户名不能为空"
}
}
});
});
</script>
这里要注意以下细节:
- 所有需要被校验的元素都必须有 name 属性,并且其取值在一个表单中必须唯一,因为rules中的Key取得是name属性,而非id。
- 同组的或元素 name 属性值必须相同。
表单校验结果:
补充:validate默认校验规则如下:
规则名称 | 具体描述 |
---|---|
required:true | 必输字段 |
remote:“remote-valid.jsp” | 使用ajax方法调用remote-valid.jsp验证输入值 |
email:true | 验证电子邮件是否正确 |
url:true | 验证网址是否正确 |
date:true | 日期验证 |
dateISO:true | ISO日期验证 |
number:true | 验证数字(包括负数、小数) |
digits:true | 整数验证 |
creditcard:true | 验证合法的信用卡号 |
equalTo:"#field" | 输入值是否和#field相同(ID) |
accept: | 合法后缀名的字符串 |
maxlength:5 | 长度最多是5的字符串 |
minlength:10 | 输入长度最小是10的字符串(汉字算一个字符) |
rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) |
range:[5,10] | 输入值必须介于 5 和 10 之间 |
max:5 | 输入值不能大于5 |
min:5 | 输入值不能小于10 |
默认消息:
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: $.validator.format("Please enter no more than {0} characters."),
minlength: $.validator.format("Please enter at least {0} characters."),
rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
range: $.validator.format("Please enter a value between {0} and {1}."),
max: $.validator.format("Please enter a value less than or equal to {0}."),
min: $.validator.format("Please enter a value greater than or equal to {0}.")
},