jQuery Validate前端表单验证-原创手记-慕课网

这是我第一次在慕课网上发表手记，难免有写的不好或者写错的地方，望慕课网的朋友提出指正与建议，大家一起交流交流！

jQuery Validate简介

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。
访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。菜鸟教程提供的 1.14.0 版本下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

jQuery Validate验证的步骤

1.导入 js 库。在需要验证的jsp页面中引入以下三个下载好的js库：

<script src="${pageContext.request.contextPath}/jquery_validate/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/jquery_validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/jquery_validate/jquery.metadata.js" type="text/javascript"></script>

引入js库之前需要在spring mvc配置文件当中对引入外部资源文件进行配置：

<!-- 外部静态资源文件引入的配置 -->
<mvc:resources location="/jquery_validate/" mapping="/jquery_validate/**"/>

2.在需要验证的form表单当中加一个idid="userForm",在页面当中加入以下javascript代码：

<script type="text/javascript">
    $().ready(function() {
            $("#userForm").validate();
    });
</script>

3.引入一个form标签库：<%@taglib prefix="s" uri="http://www.springframework，然后就可以把校验规则写在相应的字段当中，如下所示：

<s:input path="name" cssClass="{required:true, min:1, max:180, digits:true}"/>

默认的校验规则

 - required:true 必须输入的字段。
 - remote:”check.php” 使用 ajax 方法调用 check.php 验证输入值。
 - email:true 必须输入正确格式的电子邮件。
 - url:true 必须输入正确格式的网址。
 - date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。
 - dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
 - number:true 必须输入合法的数字（负数，小数）。
 - digits:true 必须输入整数。
 - creditcard: 必须输入合法的信用卡号。
 - equalTo:”#field” 输入值必须和 #field 相同。
 - accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。
 - maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。
 - minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。
 - rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。
 - range:[5,10] 输入值必须介于 5 和 10 之间。
 - max:5 输入值不能大于 5。
 - min:10 输入值不能小于 10。

默认错误提示

 - 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}.")