继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery Validate前端表单验证

qq_童年_1
关注TA
已关注
手记 11
粉丝 42
获赞 175

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

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}.")
打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP