jquery.validate使用 - 1

標籤：blog   http   io   ar   os   使用   sp   java   for   

jquery.validate使用攻略

好幾年不寫JS了，資料整理起來比較慢，格式也有點亂

主要分幾部分
jquery.validate 基本用法
jquery.validate API說明
jquery.validate 自訂
jquery.validate 常見類型的驗證代碼



jquery.validate外掛程式的文檔地址
http://docs.jquery.com/Plugins/Validation

jquery.validate外掛程式的首頁
http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jquery.validate外掛程式首頁上提供的demo
http://jquery.bassistance.de/validate/demo/

 

驗證規則

下面是預設校正規則，也可以自訂規則(1)required:true 必輸欄位(2)remote:"check.php" 使用ajax方法調用check.php驗證輸入值(3)email:true 必須輸入正確格式的電子郵件(4)url:true 必須輸入正確格式的網址(5)date:true 必須輸入正確格式的日期(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性(7)number:true 必須輸入合法的數字(負數，小數)(8)digits:true 必須輸入整數(9)creditcard: 必須輸入合法的信用卡號(10)equalTo:"#field" 輸入值必須和#field相同(11)accept: 輸入擁有合法尾碼名的字串（上傳檔案的尾碼）(12)maxlength:5 輸入長度最多是5的字串(漢字算一個字元)(13)minlength:10 輸入長度最小是10的字串(漢字算一個字元)(14)rangelength:[5,10] 輸入長度必須介於 5 和 10 之間的字串")(漢字算一個字元)(15)range:[5,10] 輸入值必須介於 5 和 10 之間(16)max:5 輸入值不能大於5(17)min:10 輸入值不能小於10驗證提示下面是預設的驗證提示，官網有簡體中文版的驗證提示下載，或者通過jQuery.extend(jQuery.validator.messages自訂錯誤提示資訊，可以將網站的驗證提示文本統一到一個檔案裡。required: "This field is required.",remote: "Please fix this field.",email: "Please enter a valid email address.",url: "Please enter a valid URL.",date: "Please enter a valid date.",dateISO: "Please enter a valid date (ISO).",number: "Please enter a valid number.",digits: "Please enter only digits",creditcard: "Please enter a valid credit card number.",equalTo: "Please enter the same value again.",accept: "Please enter a value with a valid extension.",maxlength: $.validator.format("Please enter no more than {0} characters."),minlength: $.validator.format("Please enter at least {0} characters."),rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),range: $.validator.format("Please enter a value between {0} and {1}."),max: $.validator.format("Please enter a value less than or equal to {0}."),min: $.validator.format("Please enter a value greater than or equal to {0}.")使用方式1：在控制項中使用預設驗證規則，例子：電子郵件(必填) 

<input id="email" class="required email" value="[email protected]" />

2：可以在控制項中自訂驗證規則，例子：自訂(必填,[3,5])<input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,messages:{required:‘為什麼不輸入一點文字呢‘,minlength:‘輸入的太少了‘,maxlength:‘輸入那麼多幹嘛‘}}" />3:通過javascript自訂驗證規則，下面的JS自訂了兩個規則，password和confirm_password$().ready(function() {    $("#form2").validate({        rules: {            password: {                required: true,                minlength: 5            },            confirm_password: {                required: true,                minlength: 5,                equalTo: "#password"            }        },        messages: {            password: {                required: "沒有填寫密碼",                minlength: jQuery.format("密碼不能小於{0}個字元")            },            confirm_password: {                required: "沒有確認密碼",                minlength: "確認密碼不能小於{0}個字元",                equalTo: "兩次輸入密碼不一致嘛"            }        }    });});    required除了設定為true/false之外，還可以使用運算式或者函數，比如$("#form2").validate({rules: {funcvalidate: {required: function() {return $("#password").val()!=""; }}},messages: {funcvalidate: {required: "有密碼的情況下必填"}}}); Html密碼<input id="password" name="password" type="password" />確認密碼<input id="confirm_password" name="confirm_password" type="password" />條件驗證<input id="funcvalidate" name="funcvalidate" value="" />4：使用meta自訂驗證資訊首先用JS設定meta$("#form3").validate({ meta: "validate" });            Htmlemail<input class="{validate:{required:true, email:true, messages:{required:‘輸入email地址‘, email:‘你輸入的不是有效郵件地址‘}}}"/>5:使用meta可以將驗證規則寫在自訂的標籤內，比如validateJS設定meta$().ready(function() {    $.metadata.setType("attr", "validate");    $("#form1").validate();});HtmlEmail<input id="email" name="email" validate="{required:true, email:true, messages:{required:‘輸入email地址‘, email:‘你輸入的不是有效郵件地址‘}}" />6:自訂驗證規則對於複雜的驗證，可以通過jQuery.validator.addMethod添加自訂的驗證規則官網提供的additional-methods.js裡包含一些常用的驗證方式，比如lettersonly，ziprange，nowhitespace等例子// 字元驗證   jQuery.validator.addMethod("userName", function(value, element) {    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);}, "使用者名稱只能包括中文字、英文字母、數字和底線");   //然後就可以使用這個規則了$("#form1").validate({    // 驗證規則    rules: {        userName: {            required: true,            userName: true,            rangelength: [5,10]        }    },    /* 設定錯誤資訊 */    messages: {        userName: {            required: "請填寫使用者名稱",            rangelength: "使用者名稱必須在5-10個字元之間"         }                    },});  7:radio、checkbox、select的驗證方式類似radio的驗證            性別<span>男<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}"/><br />女<input type="radio" id="gender_female" value="f" name="gender" /></span>            checkbox的驗證最少選擇兩項<span>選項1<input type="checkbox" id="check_1" value="1" name="checkGroup" class="{required:true,minlength:2, messages:{required:‘必須選擇‘,minlength:‘至少選擇2項‘}}" /><br />選項2<input type="checkbox" id="check_2" value="2" name="checkGroup" /><br />選項3<input type="checkbox" id="check_3" value="3" name="checkGroup" /><br /></span>select的驗證下拉框<span>    <select id="selectbox" name="selectbox" class="{required:true}">        <option value=""></option>        <option value="1">1</option>        <option value="2">2</option>        <option value="3">3</option>    </select></span>8:Ajax驗證用remote可以進行Ajax驗證remote: {url: "url",      //url地址type: "post",           //發送方式dataType: "json",       //資料格式     data: {                 //要傳遞的資料username: function() {return $("#username").val();}}}補充: jQuery Validation外掛程式remote驗證方式的Bughttp://www.cnblogs.com/JeffreyZhao/archive/2009/12/04/jquery-validate-remote-bug.html

jquery.validate使用 - 1