知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    jquery validate強大的jquery表單驗證插件

    作者:佳明媽 來源:jquery特效 2014-10-21 人氣:
    為什么要用jquery validate這個表單驗證插件:自己寫一個通用沒有bug強大的jquery表單驗證插件并不容易。jquery validate這個jquery插件幾乎可以輕松應對95%以上的表單驗證, jquery validate表單驗

    jquery validate的官方演示和文檔地址:

    為什么要用jquery validate這個表單驗證插件:

    form表單驗證是網站建設中前端必須要做的事情,自己寫一個通用沒有bug強大的jquery表單驗證插件并不容易,特別對新手和建站愛好者,有一個通用好用的表單驗證插件式必須的。

    jquery validate這個jquery插件幾乎可以輕松應對95%以上的表單驗證,

    jquery validate表單驗證如何調用?

    一。引用jquery.min.js和jquery.validate.js

    因為jquery.validate.js是jquery插件所以必須要有jquery支持,現在沒有使用jquery的網站應該很少。如果你堅持不用jquery,很遺憾這個jquery.validate.js不適合你。

    二、js調用代碼如下:

    $(function(){
    	//$('.js-form') 是你的表單的類名或者 id,如果是id的話就是 $('#js-form')
        //submitHandler 就是表單驗證通過的時候執行里面的函數
    	$('.js-form').validate({ 		
    		submitHandler: function (form) {
                var $form = $(form),
                    data = $form.serialize();     //序列化表單數據
                //這里是jquery表單驗證通過的時候執行的操作,比如這里,表單驗證通過的時候執行了jquery的ajax的post操作      
                $.post('js/test.json',{data:data},function(d){
                    if(d.Flag){
                        alert("如果返回為真,將執行這里代碼")               
                    }else{
    
                    }
                },'json');
    		}
    	});
    }) 

    jquery validate默認驗證規則的提示語中文化:

    $.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} 的值")
        });
    

    validate默認的驗證規則中文解釋:

    (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

    自定義validate表單驗證規則:

    addMethod(name,method,message)方法:
    參數name 是添加的方法的名字
    參數method是一個函數,接收三個參數(value,element,param) value 是元素的值,element是元素本身 param是參數
    以郵箱驗證規則為例:
    jQuery.validator.addMethod("mail", function (value, element) {
    	var mail = /^[a-z0-9._%-][email protected]([a-z0-9-]+.)+[a-z]{2,4}$/;
    	return this.optional(element) || (mail.test(value));
    }, "郵箱格式不對");

    再多的文字說明都不如看演示來的直接,jquery validate表單驗證演示

    懶人建站http://www.9020459.live/整理)

    jquery validate中文API,僅供參考:(這個中文API有點老了,但是大部分依然適用)

    名稱

    返回類型

    描述

    validate(options)

    返回:Validator

    驗證所選的FORM

    valid()

    返回:Boolean

    檢查是否驗證通過

    rules()

    返回:Options

    返回元素的驗證規則

    rules("add",rules)

    返回:Options

    增加驗證規則

    rules("remove",rules)

    返回:Options

    刪除驗證規則

    removeAttrs(attributes)

    返回:Options

    刪除特殊屬性并且返回他們

    Custom selectors

    :blank

    返回:Validator

    沒有值的篩選器

    :filled

    返回:Array <Element >

    有值的篩選器

    :unchecked

    返回:Array <Element >

    沒選擇的元素的篩選器

    Utilities

    jQuery.format

    (template,argument ,argumentN...)

    返回:String

    用參數代替模板中的 {n}

    Validator:

    validate方法返回一個Validator對象,它有很多方法, 讓你能使用引發校驗程序或者改變form的內容. validator對象有很多方法,但下面只是列出常用的

    form()

    返回:Boolean

    驗證form返回成功還是失敗

    element(element)

    返回:Boolean

    驗證單個元素是成功還是失敗

    resetForm()

    返回:undefined

    把前面驗證的FORM恢復到驗證前原來的狀態

    showErrors(errors)

    返回:undefined

    顯示特定的錯誤信息

     

    Validator functions:

    setDefaults(defaults)

    返回:undefined

    改變默認的設置

    addMethod(name,method,message)

    返回:undefined

    添加一個新的驗證方法. 必須包括一個獨一無二的名字,一個JAVASCRIPT的方法和一個默認的信息

    addClassRules(name,rules)

    返回:undefined

    增加組合驗證類型 在一個類里面用多種驗證方法里比較有用

    addClassRules(rules)

    返回:undefined

    增加組合驗證類型 在一個類里面用多種驗證方法里比較有用,這個是一下子加多個

    內置驗證方式:

    required()

    返回:Boolean

    必填驗證元素

    required(dependency-expression)

    返回:Boolean

    必填元素依賴于表達式的結果

    required(dependency-callback)

    返回:Boolean

    必填元素依賴于回調函數的結果

    remote(url)

    返回:Boolean

    請求遠程校驗。url通常是一個遠程調用方法

    minlength(length)

    返回:Boolean

    設置最小長度

    maxlength(length)

    返回:Boolean

    設置最大長度

    rangelength(range)

    返回:Boolean

    設置一個長度范圍[min,max]

    min(value)

    返回:Boolean

    設置最大值

    max(value)

    返回:Boolean

    設置最小值

    email()

    返回:Boolean

    驗證電子郵箱格式

    range(range)

    返回:Boolean

    設置值的范圍

    url()

    返回:Boolean

    驗證URL格式

    date()

    返回:Boolean

    驗證日期格式(類似30/30/2008的格式,不驗證日期準確性只驗證格式)

    dateISO()

    返回:Boolean

    驗證ISO類型的日期格式

    dateDE()

    返回:Boolean

    驗證德式的日期格式(29.04.1994 or 1.1.2006)

    number()

    返回:Boolean

    驗證十進制數字(包括小數的)

    digits()

    返回:Boolean

    驗證整數

    creditcard()

    返回:Boolean

    驗證信用卡號

    accept(extension)

    返回:Boolean

    驗證相同后綴名的字符串

    equalTo(other)

    返回:Boolean

    驗證兩個輸入框的內容是否相同

    phoneUS()

    返回:Boolean

    驗證美式的電話號碼

    validate ()的可選項:

    debug:進行調試模式(表單不提交):

    $(".selector").validate

    ({

       debug:true

    })

    把調試設置為默認:

    $.validator.setDefaults({

       debug:true

    })

    submitHandler:

    通過驗證后運行的函數,里面要加上表單提交的函數,否則表單不會提交

    $(".selector").validate({

       submitHandler:function(form) {

    $(form).ajaxSubmit();

       }

    })

    ignore:

    對某些元素不進行驗證

    $("#myform").validate({

       ignore:".ignore"

    })

    rules:

    自定義規則,key:value的形式,key是要驗證的元素,value可以是字符串或對象

    $(".selector").validate({

       rules:{

         name:"required",

         email:{

           required:true,

           email:true

         }

       }

    })

    messages:

    自定義的提示信息key:value的形式key是要驗證的元素,值是字符串或函數

    $(".selector").validate({

       rules:{

         name:"required",

         email:{

           required:true,

           email:true

         }

       },

       messages:{

         name:"Name不能為空",

         email:{

           required:"E-mail不能為空",

           email:"E-mail地址不正確"

         }

       }

    })

    groups:

    對一組元素的驗證,用一個錯誤提示,用error Placement控制把出錯信息放在哪里

    $("#myform").validate({

      groups:{

        username:"fname lname"

      },

      errorPlacement:function(error,element) {

         if (element.attr("name") == "fname" || element.attr("name") == "lname")

           error.insertAfter("#lastname");

         else

           error.insertAfter(element);

       },

       debug:true

    })

    Onubmit Boolean 默認:true

    是否提交時驗證

    $(".selector").validate({

       onsubmit:false

    })

    onfocusout Boolean 默認:true 

    是否在獲取焦點時驗證

    $(".selector").validate({

       onfocusout:false

    })

    onkeyup Boolean 默認:true 

    是否在敲擊鍵盤時驗證

    $(".selector").validate({

       onkeyup:false

    })

    onclick Boolean 默認:true

    是否在鼠標點擊時驗證(一般驗證checkbox,radiobox)

    $(".selector").validate({

       onclick:false

    })

    focusInvalid Boolean 默認:true

    提交表單后,未通過驗證的表單(第一個或提交之前獲得焦點的未通過驗證的表單)會獲得焦點

    $(".selector").validate({

       focusInvalid:false

    })

    focusCleanup Boolean 默認:false

    當未通過驗證的元素獲得焦點時,并移除錯誤提示(避免和 focusInvalid.一起使用)

    $(".selector").validate({

       focusCleanup:true

    })

    errorClass String默認:"error"

    指定錯誤提示的css類名,可以自定義錯誤提示的樣式

    $(".selector").validate({

       errorClass:"invalid"

    })

    errorElement String 默認:"label"

    使用什么標簽標記錯誤

    $(".selector").validate

       errorElement:"em"

    })

    wrapper String

    使用什么標簽再把上邊的errorELement包起來

    $(".selector").validate({

       wrapper:"li"

    })

    errorLabelContainer Selector

    把錯誤信息統一放在一個容器里面

    $("#myform").validate({

       errorLabelContainer:"#messageBox",

       wrapper:"li",

       submitHandler:function() { alert("Submitted!") }

    })

    showErrors:

    跟一個函數,可以顯示總共有多少個未通過驗證的元素

    $(".selector").validate({

       showErrors:function(errorMap,errorList) {

            $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");

            this.defaultShowErrors();

       }

    })

    errorPlacement:

    跟一個函數,可以自定義錯誤放到哪里

    $("#myform").validate({

      rrorPlacement:function(error,element) {  error.appendTo(element.parent("td").next("td"));

       },

       debug:true

    })

    success:

    要驗證的元素通過驗證后的動作,如果跟一個字符串,會當做一個css類,也可跟一個函數

    $("#myform").validate({

            success:"valid",

            submitHandler:function() { alert("Submitted!") }

    })

    highlight:

    可以給未通過驗證的元素加效果,閃爍等

     

    addMethod(name,method,message)方法:

    參數name是添加的方法的名字

    參數method是一個函數,接收三個參數(value,element,param) value是元素的值,element是元素本身 param是參數,我們可以用addMethod來添加除built-in Validation methods之外的驗證方法 比如有一個字段,只能輸一個字母,范圍是a-f,寫法如下:

    $.validator.addMethod("af",function(value,element,params){

       if(value.length>1){

        return false;

       }

       if(value>=params[0] && value<=params[1]){

        return true;

       }else{

        return false;

       }

    },"必須是一個字母,且a-f");

    用的時候,比如有個表單字段的id="username",則在rules中寫

    username:{

       af:["a","f"]

    }

    addMethod的第一個參數,就是添加的驗證方法的名子,這時是af

    addMethod的第三個參數,就是自定義的錯誤提示,這里的提示為:"必須是一個字母,且a-f"

    addMethod的第二個參數,是一個函數,這個比較重要,決定了用這個驗證方法時的寫法

    如果只有一個參數,直接寫,如果af:"a",那么a就是這個唯一的參數,如果多個參數,用在[]里,用逗號分開

    meta String方式:

    $("#myform").validate({

       meta:"validate",

       submitHandler:function() { alert("Submitted!") }

    })

    <script type="text/javascript" src="js/jquery.metadata.js"></script>

    <script type="text/javascript" src="js/jquery.validate.js"></script>

    <form id="myform">

      <input type="text" name="email" class="{validate:{ required:true,email:true }}" />

      <input type="submit" value="Submit" />

    </form>


    ↓ 查看全文

    jquery validate強大的jquery表單驗證插件由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    jquery validate強大的jquery表單驗證插件-最新評論

    梦幻接高级宝石赚钱吗 炒股配资 广西快乐双彩玩法规则 对股票投资者的建议 苏州股票配资小杨 安徽11选5遗漏号走势图 股票配资平台是合法的么重生回古代小说 福建快3开奖结果27期 湖北11选五开奖结果 新疆喜乐彩开奖信息 手机版11选5分析软件