- 浏览: 51808 次
- 性别:
- 来自: 大连
最近访客 更多访客>>
最新评论
-
lovefly_zero:
很感谢你的文章 不过调整一下排版吧 冗余code太多了。
jQuery验证框架(六)内置验证方法 (jQuery validation) -
tomorrow009:
受交了~
RoR的部署方案选择
jQuery验证框架
七、注意事项
[1]复杂的name属性值
当使用rules选项时,如果表单的name属性值包含有非法的javascript标识符,必须将name值加上引号。
- $("#myform").validate({
- rules: {
- // no quoting necessary
- name: "required",
- // quoting necessary!
- "user[email]": "email",
- // dots need quoting, too!
- "user.address.street": "required"
- }
- });
$("#myform").validate({ rules: { // no quoting necessary name: "required", // quoting necessary! "user[email]": "email", // dots need quoting, too! "user.address.street": "required" } });
[2]重构规则
不论什么时候,当你的表单中的多个字段含有相同的验证规则及验证消息,重构规则可以减少很多重复。使用 addMethod 和 addClassRules 将非常有效果。
假使已经重构了如下规则:
- // alias required to cRequired with new message
- $.validator.addMethod("cRequired", $.validator.methods.required,
- "Customer name required");
- // alias minlength, too
- $.validator.addMethod("cMinlength", $.validator.methods.minlength,
- // leverage parameter replacement for minlength, {0} gets replaced with 2
- $.format("Customer name must have at least {0} characters"));
- // combine them both, including the parameter for minlength
- $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
// alias required to cRequired with new message $.validator.addMethod("cRequired", $.validator.methods.required, "Customer name required"); // alias minlength, too $.validator.addMethod("cMinlength", $.validator.methods.minlength, // leverage parameter replacement for minlength, {0} gets replaced with 2 $.format("Customer name must have at least {0} characters")); // combine them both, including the parameter for minlength $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
那么使用的时候如下:
- <input name="customer1" class="customer" />
- <input name="customer2" class="customer" />
- <input name="customer3" class="customer" />
<input name="customer1" class="customer" /> <input name="customer2" class="customer" /> <input name="customer3" class="customer" />
[3]验证消息
当验证了一个无效的表单元素,验证消息显示在用户面前。这些消息是从哪里来的呢?有三个途径来取得验证消息。
1.通过待验证表单元素的title属性
2.通过默认的验证消息
3.通过插件设置(messages选项)
这三种途径的优先顺序为:3 > 1 > 2
[4]验证消息与Google工具栏的冲突
有时候验证消息会与Goole工具栏的AutoFill插件冲突。AutoFill通过替换表单元素的title属性,以显示提示消息。此时,验证消息如果获取的是title属性值,那么就得不到我们预期想要得到的结果。当文档载入时,可以通过如下方法避免冲突。
$("input.remove_title").attr("title", "");
[5]表单提交
默认地,表单验证失败时阻止表单的提交,当验证通过,表单提交。当然,也可以通过submitHandler来自定义提交事件。
将提交按钮的class属性设置成cancel,在表单提交时可以跳过验证。
- <input type="submit" name="submit" value="Submit" />
- <input type="submit" class="cancel" name="cancel" value="Cancel" />
<input type="submit" name="submit" value="Submit" /> <input type="submit" class="cancel" name="cancel" value="Cancel" />
下面这段代码将循环提交表单:
- $("#myform").validate({
- submitHandler: function(form) {
- // some other code maybe disabling submit button
- // then:
- $(form).submit();
- }
- });
$("#myform").validate({ submitHandler: function(form) { // some other code maybe disabling submit button // then: $(form).submit(); } });
$(form).submit() 触发了另外一轮的验证,验证后又去调用submitHandler,然后就循环了。可以用 form.submit() 来触发原生的表单提交事件。
$("#myform").validate({ submitHandler: function(form) { form.submit(); } });
原文请见:http://docs.jquery.com/Plugins/Validation
----------------------------------------------------------------------------------------------------------------------------------------------
发表评论
-
jQuery验证框架(八)应用实例 (jQuery validation)
2010-05-17 16:28 1332jQuery验证框架 八、应用实例 [1] 验证页面 ... -
jQuery验证框架(六)内置验证方法 (jQuery validation)
2010-05-17 16:26 1086jQuery验证框架 六、框架内建的验证方法( List of ... -
jQuery验证框架(五)验证器 (jQuery validation)
2010-05-17 16:25 1431jQuery验证框架 五、验证器( Validator ) ... -
jQuery验证框架(三、四)选择器及实用工具 (jQuery validation)
2010-05-17 16:24 748jQuery验证框架 三、定制的选择器(Custom Sele ... -
jQuery验证框架(二)插件方法 (jQuery validation)
2010-05-17 16:24 1174jQuery验证框架 二、插件方法( Plugin metho ... -
jQuery验证框架(一) 可选项 (jQuery validation)
2010-05-17 16:23 1464jQuery验证框架 Html代码 & ... -
Jquery属性(一) -- Attr
2010-05-17 16:22 995属性 [1] attr( name ) Retur ... -
Jquery选择器(九) -- Form Filters
2010-05-17 16:22 859表单过滤器 [1] :enabled Return ... -
Jquery选择器(八) -- Forms
2010-05-17 16:21 725表单选择器 [1] :input Returns: ... -
Jquery选择器(七) -- Child Filters
2010-05-17 16:20 940子节点过滤器 [1] :nth-child(index/ev ... -
Jquery选择器(六) -- Attribute Filters
2010-05-17 16:20 944属性过滤器 注意:在jQuery1.3中,[@attr] 形式 ... -
Jquery选择器(五) -- Visibility Filters
2010-05-17 16:19 897可见性过滤器 [1] :hidden Return ... -
Jquery选择器(四) -- Content Filters
2010-05-17 16:19 715内容过滤器 [1] :contains(text) ... -
Jquery选择器(三) -- Basic Filters
2010-05-17 16:18 897基本过滤选择器 [1] :fi ... -
Jquery选择器(二)--Hierarchy
2010-05-17 16:17 816层级选择器 [1] ancestor descendant ... -
Jquery选择器(一) -- Basics
2010-05-17 16:17 677基本选择器 [1] #id Returns: Ar ... -
Jquery核心(三) Data
2010-05-17 16:16 771jQuery数据 [1] data( name ) ... -
Jquery核心(二) $(...) jQuery Object Accessors
2010-05-17 16:15 957jQuery对象访问器 [1] each( callback ... -
Jquery核心(一) $(...) The jQuery Function
2010-05-17 16:14 924jQuery核心 [1] jQuery( expression ...
相关推荐
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 ...(七)注意事项 (jQuery validation) 16 (八)应用实例 (jQuery validation) 17 出处地址:http://koalaxyq.javaeye.com/blog/556633
jquery.validate Validation .js验证框架 帮助 手册 文档.doc ...(七)注意事项 (jQuery validation) 16 (八)应用实例 (jQuery validation) 17 出处地址:http://koalaxyq.javaeye.com/blog/556633
jQueryvalidation验证框架.pdf
jquery.validate_ValidationjQuery表单验证框架
简述jQuery验证插件validation的功能和使用
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
我在 jquery-validation-1.9.0版本的基础上增加了可以验证正则表达式的功能,由于我在使用当中发现其的邮箱验证不能很好的验证,输入中文后只要在后面加个@符号,他就通过,比如 【时代的@ff.cc】 这样也能通过 ...
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
jQuery 插件使客户端表单验证变得容易,同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西,或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时,它都是一个不错的选择。该插件捆绑了一...
jquery的验证框架,validation 最新版
jQuery+Validation表单验证
jQuery验证控件 Validation Plugin - v1.14.0汉化及附带案例
框架验证validation 框架验证validation
struts验证框架-validation的验证框架
jQuery 验证插件 jquery-validation-1.11.1
让jquery validation plugin 支持zepto
Quick Validation 是一个 jQuery 的表单验证框架。你可以定制错误信息: errorRequired errorMaxlengtn errorMinlength errorNumber errorInteger errorRange errorEmail errorPhone errorExpression ...
最新最流行的jquery验证框架
表单验证JQ插件jquery-validation.js