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

/*
* Metadata - jQuery plugin for parsing metadata from elements
*
* Copyright (c) 2006 John Resig, Yehuda Katz, J锟矫秗n Zaefferer, Paul McLanahan
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.php *   http://www.gnu.org/licenses/gpl.html * Download by http://www.jb51.net * Revision: $Id: jquery.metadata.js 3640 2007-10-11 18:34:38Z pmclanahan $
*
*/

/**
* Sets the type of metadata to use. Metadata is encoded in JSON, and each property
* in the JSON will become a property of the element itself.
*
* There are four supported types of metadata storage:
*
*   attr:  Inside an attribute. The name parameter indicates *which* attribute.
*
*   class: Inside the class attribute, wrapped in curly braces: { }
*
*   elem:  Inside a child element (e.g. a script tag). The
*          name parameter indicates *which* element.
*   html5: Values are stored in data-* attributes.
*
* The metadata for an element is loaded the first time the element is accessed via jQuery.
*
* As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
* matched by expr, then redefine the metadata type and run another $(expr) for other elements.
*
* @name $.metadata.setType
*
* @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
* @before $.metadata.setType("class")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from the class attribute
*
* @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
* @before $.metadata.setType("attr", "data")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from a "data" attribute
*
* @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
* @before $.metadata.setType("elem", "script")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from a nested script element
*
* @example <p id="one" class="some_class" data-item_id="1" data-item_label="Label">This is a p</p>
* @before $.metadata.setType("html5")
* @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
* @desc Reads metadata from a series of data-* attributes
*
* @param String type The encoding type
* @param String name The name of the attribute to be used to get metadata (optional)
* @cat Plugins/Metadata
* @descr Sets the type of encoding to be used when loading metadata for the first time
* @type undefined
* @see metadata()
*/

(function ($) {

$.extend({
metadata: {
defaults: {
type: 'class',
name: 'metadata',
cre: /({.*})/,
single: 'metadata'
},
setType: function (type, name) {
this.defaults.type = type;
this.defaults.name = name;
},
get: function (elem, opts) {
var settings = $.extend({}, this.defaults, opts);
// check for empty string in single property
if (!settings.single.length) settings.single = 'metadata';

var data = $.data(elem, settings.single);
// returned cached data if it already exists
if (data) return data;

data = "{}";

var getData = function (data) {
if (typeof data != "string") return data;

if (data.indexOf('{') < 0) {
data = eval("(" + data + ")");
}
}

var getObject = function (data) {
if (typeof data != "string") return data;

data = eval("(" + data + ")");
return data;
}

if (settings.type == "html5") {
var object = {};
$(elem.attributes).each(function () {
var name = this.nodeName;
if (name.match(/^data-/)) name = name.replace(/^data-/, '');
else return true;
object[name] = getObject(this.nodeValue);
});
} else {
if (settings.type == "class") {
var m = settings.cre.exec(elem.className);
if (m)
data = m[1];
} else if (settings.type == "elem") {
if (!elem.getElementsByTagName) return;
var e = elem.getElementsByTagName(settings.name);
if (e.length)
data = $.trim(e[0].innerHTML);
} else if (elem.getAttribute != undefined) {
var attr = elem.getAttribute(settings.name);
if (attr)
data = attr;
}
object = getObject(data.indexOf("{") < 0 ? "{" + data + "}" : data);
}

$.data(elem, settings.single, object);
return object;
}
}
});

/**
* Returns the metadata object for the first member of the jQuery object.
*
* @name metadata
* @descr Returns element's metadata object
* @param Object opts An object contianing settings to override the defaults
* @type jQuery
* @cat Plugins/Metadata
*/
$.fn.metadata = function (opts) {
return $.metadata.get(this[0], opts);
};

})(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自定义属性的效果