引用文件：

"~/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** @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* * @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 propertyif ( !settings.single.length ) settings.single = 'metadata';var data = $.data(elem, settings.single);// returned cached data if it already existsif ( 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 class='errmsg'>");p.append(error);p.appendTo(element.parent());} }) })(jQuery); View Code

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} 的值")});})); View Code

有一些公用的寫在了metadata.js里面

$.validator.setDefaults({debug: true,errorPlacement: function (error, element) {var p = $("<p class='errmsg'>");p.append(error);p.appendTo(element.parent());} }) <style type="text/css">.errmsg {margin: -30px -40px 0 0px;float: right;color: #F30;}</style>

?

就是顯示錯誤信息位置設定

使用：

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文件

<form id="registerForm" method="get" action=""><fieldset><p><label for="cusername">用戶名</label><input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用戶名不能為空" data-msg-rangelength="用戶名長度必須是2到10個字符"></p><p><label for="cpassword">密碼</label><input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密碼不能為空" data-msg-minlength="至少設置6位密碼"></p><p><label for="cconfirmpassword">確認密碼</label><input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="兩次密碼不一致"></p><p><label for="cemail">郵箱</label><input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="郵箱不能為空" data-msg-email="郵箱的格式不正確"></input></p><p><label for="chasreferee">有推薦人請勾選</label><input type="checkbox" id="chasreferee" name="hasreferee"></p><p><label for="creferee">推薦人</label><input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推薦人不能為空"></input></p><p><input type="submit" value="提交"></p></fieldset> </form>

直接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 class='errmsg'>");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

總結

以上是生活随笔為你收集整理的jquery.validation.js 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。