jquery.validation.js 使用
生活随笔
收集整理的這篇文章主要介紹了
jquery.validation.js 使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
引用文件：
"~/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 Codemessages_cn.js
(function (factory) {if (typeof define === "function" && define.amd) {define(["jquery", "../jquery.validate"], factory);} else {factory(jQuery);} }(function ($) {$.extend($.validator.messages, {required: "必填",remote: "請(qǐng)修正該字段",email: "請(qǐng)輸入正確格式的電子郵件",url: "請(qǐng)輸入合法的網(wǎng)址",date: "請(qǐng)輸入合法的日期",dateISO: "請(qǐng)輸入合法的日期 (ISO).",number: "請(qǐng)輸入合法的數(shù)字",digits: "只能輸入整數(shù)",creditcard: "請(qǐng)輸入合法的信用卡號(hào)",equalTo: "請(qǐng)?jiān)俅屋斎胂嗤闹?/span>",accept: "請(qǐng)輸入擁有合法后綴名的字符串",maxlength: $.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度最多是 {0} 的字符串"),minlength: $.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度最少是 {0} 的字符串"),rangelength: $.validator.format("請(qǐng)輸入一個(gè)長(zhǎng)度介于 {0} 和 {1} 之間的字符串"),range: $.validator.format("請(qǐng)輸入一個(gè)介于 {0} 和 {1} 之間的值"),max: $.validator.format("請(qǐng)輸入一個(gè)最大為 {0} 的值"),min: $.validator.format("請(qǐng)輸入一個(gè)最小為 {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>?
就是顯示錯(cuò)誤信息位置設(shè)定
使用：
1.建表單form，
2.把控件name賦值（只要各不相同即可),并在class里面賦值，比如required
3.在最后時(shí)判斷是否驗(yàn)證通過(guò)再進(jìn)行下一步操作
if ($("#formFinance").valid()) {if (!financeFlag) {financeFlag = true;o = self.selectFinanceItem();上面的是早期的jquery.validate.js,我測(cè)的是1.5.5版本
最新的1.13版本的使用方法發(fā)生了變動(dòng)，不需要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="用戶名長(zhǎng)度必須是2到10個(gè)字符"></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="至少設(shè)置6位密碼"></p><p><label for="cconfirmpassword">確認(rèn)密碼</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">有推薦人請(qǐng)勾選</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-屬性使用
?
也可以自己手動(dòng)設(shè)置具體信息：
$("#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
總結(jié)
以上是生活随笔為你收集整理的jquery.validation.js 使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： JVM内存溢出分析-实战JVM（二）
- 下一篇： NSString和SwiftString