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这个插件比较简单 也没什么好介绍 我们先来看看这个文件有什么东西。我先贴点代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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自定义属性的效果