jquery validation-jquery的验证框架详解（3）

不知道各位发现一个问题没有。我们上两节的验证规则都是直接放在class中的。其实这个框架也支持把规则和msg都放在class中。不过我相信基本没几个人会这么做吧

虽然没几个人会这么做。不过我这里还是给大家看下效果

class="{required:true,minlength:5,messages:{required:'请输入内容'}}" 哈哈这种方式大家看来肯定会很诧异啊！

其实我也不太赞同这种写法。想当然有时候需求变化无常啊！有时候偏偏就需要这样写才凑效

这一节和之后的章节我都不准备介绍这种用法。其实也简单就是这样直接放在class中就可以用

我们这节就介绍一下metadata 以及给 form添加一些自定义参数。

比如：将错误信息统一放在一个块中，禁止keyup验证等等

第一步：form常见参数设置

$("#form").each(function () {
$(this).validate({
　　errorElement: "div", //错误信息的包装标签
　　wrapper: "li", //错误信息包装标签的父标签
　　onfocusout: false, //禁止失去焦点时验证
　　onkeyup: false, //禁止按键时验证
　　errorClass: "ErrorMsg", //错误信息的class
　　onclick: false, //禁止checkbox,radiobutton点击时验证
　　errorLabelContainer: $('#ErrorMsgContainer'), //包装所有error的容器
　　ignre: ".ignore" //忽略不需要验证的input,select等
});

以上是我在我们项目中运用到的。由于布局原因我们在其中用到了一个集中显示错误信息的块这个errorClass:ErrorMsg 其实我们是放了一个ul 这个<ul class="ErrorMsg"></ul>

并且由于我们业务的原因可能需要在某次触发验证的时候忽略某些元素不验证。这个时候就需要ignore了，这里的ignore其实就是针对那些class中包含ignore的元素不进行验证

比如：<input type="text" class="inputtxt ignore" id="txtName"/> 类似这话元素就不会验证。看比较简单吧

第二步：metadata是什么东西？怎么用哦？

其实metadata这个插件比较简单也没什么好介绍我们先来看看这个文件有什么东西。我先贴点代码

View Code

  1 /*
  2 * Metadata - jQuery plugin for parsing metadata from elements
  3 *
  4 * Copyright (c) 2006 John Resig, Yehuda Katz, J锟矫秗n Zaefferer, Paul McLanahan
  5 *
  6 * Dual licensed under the MIT and GPL licenses:
  7 *   http://www.opensource.org/licenses/mit-license.php
  8 *   http://www.gnu.org/licenses/gpl.html
  9 * Download by http://www.jb51.net
 10 * Revision: $Id: jquery.metadata.js 3640 2007-10-11 18:34:38Z pmclanahan $
 11 *
 12 */
 13 
 14 /**
 15 * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
 16 * in the JSON will become a property of the element itself.
 17 *
 18 * There are four supported types of metadata storage:
 19 *
 20 *   attr:  Inside an attribute. The name parameter indicates *which* attribute.
 21 *          
 22 *   class: Inside the class attribute, wrapped in curly braces: { }
 23 *   
 24 *   elem:  Inside a child element (e.g. a script tag). The
 25 *          name parameter indicates *which* element.
 26 *   html5: Values are stored in data-* attributes.
 27 *          
 28 * The metadata for an element is loaded the first time the element is accessed via jQuery.
 29 *
 30 * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
 31 * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
 32 * 
 33 * @name $.metadata.setType
 34 *
 35 * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
 36 * @before $.metadata.setType("class")
 37 * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
 38 * @desc Reads metadata from the class attribute
 39 * 
 40 * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
 41 * @before $.metadata.setType("attr", "data")
 42 * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
 43 * @desc Reads metadata from a "data" attribute
 44 * 
 45 * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
 46 * @before $.metadata.setType("elem", "script")
 47 * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
 48 * @desc Reads metadata from a nested script element
 49 * 
 50 * @example <p id="one" class="some_class" data-item_id="1" data-item_label="Label">This is a p</p>
 51 * @before $.metadata.setType("html5")
 52 * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
 53 * @desc Reads metadata from a series of data-* attributes
 54 *
 55 * @param String type The encoding type
 56 * @param String name The name of the attribute to be used to get metadata (optional)
 57 * @cat Plugins/Metadata
 58 * @descr Sets the type of encoding to be used when loading metadata for the first time
 59 * @type undefined
 60 * @see metadata()
 61 */
 62 
 63 (function ($) {
 64 
 65     $.extend({
 66         metadata: {
 67             defaults: {
 68                 type: 'class',
 69                 name: 'metadata',
 70                 cre: /({.*})/,
 71                 single: 'metadata'
 72             },
 73             setType: function (type, name) {
 74                 this.defaults.type = type;
 75                 this.defaults.name = name;
 76             },
 77             get: function (elem, opts) {
 78                 var settings = $.extend({}, this.defaults, opts);
 79                 // check for empty string in single property
 80                 if (!settings.single.length) settings.single = 'metadata';
 81 
 82                 var data = $.data(elem, settings.single);
 83                 // returned cached data if it already exists
 84                 if (data) return data;
 85 
 86                 data = "{}";
 87 
 88                 var getData = function (data) {
 89                     if (typeof data != "string") return data;
 90 
 91                     if (data.indexOf('{') < 0) {
 92                         data = eval("(" + data + ")");
 93                     }
 94                 }
 95 
 96                 var getObject = function (data) {
 97                     if (typeof data != "string") return data;
 98 
 99                     data = eval("(" + data + ")");
100                     return data;
101                 }
102 
103                 if (settings.type == "html5") {
104                     var object = {};
105                     $(elem.attributes).each(function () {
106                         var name = this.nodeName;
107                         if (name.match(/^data-/)) name = name.replace(/^data-/, '');
108                         else return true;
109                         object[name] = getObject(this.nodeValue);
110                     });
111                 } else {
112                     if (settings.type == "class") {
113                         var m = settings.cre.exec(elem.className);
114                         if (m)
115                             data = m[1];
116                     } else if (settings.type == "elem") {
117                         if (!elem.getElementsByTagName) return;
118                         var e = elem.getElementsByTagName(settings.name);
119                         if (e.length)
120                             data = $.trim(e[0].innerHTML);
121                     } else if (elem.getAttribute != undefined) {
122                         var attr = elem.getAttribute(settings.name);
123                         if (attr)
124                             data = attr;
125                     }
126                     object = getObject(data.indexOf("{") < 0 ? "{" + data + "}" : data);
127                 }
128 
129                 $.data(elem, settings.single, object);
130                 return object;
131             }
132         }
133     });
134 
135     /**
136     * Returns the metadata object for the first member of the jQuery object.
137     *
138     * @name metadata
139     * @descr Returns element's metadata object
140     * @param Object opts An object contianing settings to override the defaults
141     * @type jQuery
142     * @cat Plugins/Metadata
143     */
144     $.fn.metadata = function (opts) {
145         return $.metadata.get(this[0], opts);
146     };
147 
148 })(jQuery);

其实我们主要看这段代码就行这个文件的作用就是辅助jquery validation主文件格式化放在class中的验证规则

defaults: {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
},

这段代码第一个Type 其实指的就是我们将验证的规则放在什么属性中默认这个文件中引用的是放在class中的。所以前几篇我们介绍的都是放在class中。

但是，大家有没有发现什么问题？如果我们把验证规则和一些样式都放在class中会失效。所以这个时候metadata这个文件就起作用了我们自定义一个属性用来放规则

我们只需要这么做。在需要用到的地方加上下面这句话我们就可以将规则变换到validate属性中这样就不会与class中的其他样式起冲突

$(function () {
/*配置validate*/
$.metadata.setType("attr", "validate");

});

这是我们在项目中用到的使用metadat自定义属性的效果

posted on 2013-05-10 17:03 Tank_xiao 阅读(652) 评论(2) 编辑收藏举报

jquery validation-jquery的验证框架 详解（3）

jquery validation-jquery的验证框架详解（3）