引用文件:
"~/assets/global/plugins/jquery-validation/js/jquery.validate.min.js", "~/assets/global/plugins/jquery-validation/js/jquery.metadata.js", "~/assets/global/plugins/jquery-validation/js/localization/messages_cn.js",
jquery.metadata.js
/* * Metadata - jQuery plugin for parsing metadata from elements * * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn 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 * * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $ * *//** * 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 three 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. * * 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 * * @exampleThis is a p
* @before $.metadata.setType("class") * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" * @desc Reads metadata from the class attribute * * @exampleThis is a p
* @before $.metadata.setType("attr", "data") * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label" * @desc Reads metadata from a "data" attribute * * @exampleThis is a 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 * * @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 = "{}"; 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 undefined; 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; } if ( data.indexOf( '{ ' ) <0 ) data = "{ " + data + "}"; data = eval("(" + data + ")"); $.data( elem, settings.single, data ); return data; } }});/** * 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 );};$.validator.setDefaults({ debug: true, errorPlacement: function (error, element) { var p = $(""); p.append(error); p.appendTo(element.parent()); }})})(jQuery);
messages_cn.js
(function (factory) { if (typeof define === "function" && define.amd) { define(["jquery", "../jquery.validate"], factory); } else { factory(jQuery); }}(function ($) { $.extend($.validator.messages, { required: "必填", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"), minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: $.validator.format("请输入一个最大为 {0} 的值"), min: $.validator.format("请输入一个最小为 {0} 的值") });}));
有一些公用的写在了metadata.js里面
$.validator.setDefaults({ debug: true, errorPlacement: function (error, element) { var p = $(""); p.append(error); p.appendTo(element.parent()); }})
就是显示错误信息位置设定
使用:
1.建表单form,
2.把控件name赋值(只要各不相同即可),并在class里面赋值,比如required
3.在最后时判断是否验证通过再进行下一步操作
if ($("#formFinance").valid()) { if (!financeFlag) { financeFlag = true; o = self.selectFinanceItem();
上面的是早期的jquery.validate.js,我测的是1.5.5版本
最新的1.13版本的使用方法发生了变动,不需要jquery.metadata.js文件
直接data-属性使用
也可以自己手动设置具体信息:
$("#formFinance").validate({ rules: { fFinanceName: { required: true }, fLoanCount: { required: true ,min:0} }, messages: { fFinanceName: { required: "必填", }, fLoanCount: { required: "必填", }, fRate: { required: "必填", }, fFee: { required: "必填", }, fPeriod: { required: "必选", } }, errorPlacement: function (error, element) { var p = $(""); p.append(error); p.appendTo(element.parent()); } });
http://blog.csdn.net/hliq5399/article/details/6557789
http://www.cnblogs.com/linjiqin/p/3431835.html
http://www.runoob.com/jquery/jquery-plugin-validate.html
http://www.cnblogs.com/yanjunwu/p/3764740.html
https://github.com/ffmike/jquery-validate