這篇文章主要介紹“jquery-validate怎么用”，在日常操作中，相信很多人在jquery-validate怎么用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”jquery-validate怎么用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比可克達(dá)拉網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式可克達(dá)拉網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋可克達(dá)拉地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴(lài)。

jquery-validate是指表單驗(yàn)證插件，是基于jquery開(kāi)發(fā)的驗(yàn)證插件，為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶(hù)端表單驗(yàn)證變得更簡(jiǎn)單；該插件捆綁了一套有用的驗(yàn)證方法，包括URL和電子郵件驗(yàn)證，同時(shí)提供一個(gè)用來(lái)編寫(xiě)用戶(hù)自定義方法的API。

本教程操作環(huán)境：windows7系統(tǒng)、jquery2.2.1&&jquery-validate1.14.0版本、Dell G3電腦。

jquery-validate是指表單驗(yàn)證插件，是基于jquery開(kāi)發(fā)的一個(gè)驗(yàn)證插件。

jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶(hù)端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿(mǎn)足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來(lái)編寫(xiě)用戶(hù)自定義方法的 API。所有的捆綁方法默認(rèn)使用英語(yǔ)作為錯(cuò)誤信息，且已翻譯成其他 37 種語(yǔ)言。

該插件是由 J?rn Zaefferer 編寫(xiě)和維護(hù)的，他是 jQuery 團(tuán)隊(duì)的一名成員，是 jQuery UI 團(tuán)隊(duì)的主要開(kāi)發(fā)人員，是 QUnit 的維護(hù)人員。該插件在 2006 年 jQuery 早期的時(shí)候就已經(jīng)開(kāi)始出現(xiàn)，并一直更新至今。目前版本是 1.14.0。

訪問(wèn) jQuery Validate 官網(wǎng)，下載最新版的 jQuery Validate 插件。

導(dǎo)入 js 庫(kù)

默認(rèn)校驗(yàn)規(guī)則

默認(rèn)提示

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.",
    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}." )
}

jQuery Validate提供了中文信息提示包，位于下載包的 /localization/messages_zh.js，內(nèi)容如下：

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {
/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 漢語(yǔ), 漢語(yǔ))
 */
$.extend($.validator.messages, {
    required: "這是必填字段",
    remote: "請(qǐng)修正此字段",
    email: "請(qǐng)輸入有效的電子郵件地址",
    url: "請(qǐng)輸入有效的網(wǎng)址",
    date: "請(qǐng)輸入有效的日期",
    dateISO: "請(qǐng)輸入有效的日期 (YYYY-MM-DD)",
    number: "請(qǐng)輸入有效的數(shù)字",
    digits: "只能輸入數(shù)字",
    creditcard: "請(qǐng)輸入有效的信用卡號(hào)碼",
    equalTo: "你的輸入不相同",
    extension: "請(qǐng)輸入有效的后綴",
    maxlength: $.validator.format("最多可以輸入 {0} 個(gè)字符"),
    minlength: $.validator.format("最少要輸入 {0} 個(gè)字符"),
    rangelength: $.validator.format("請(qǐng)輸入長(zhǎng)度在 {0} 到 {1} 之間的字符串"),
    range: $.validator.format("請(qǐng)輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
    max: $.validator.format("請(qǐng)輸入不大于 {0} 的數(shù)值"),
    min: $.validator.format("請(qǐng)輸入不小于 {0} 的數(shù)值")
});
}));

你可以將該本地化信息文件 /localization/messages_zh.js 引入到頁(yè)面：

使用方式

1、將校驗(yàn)規(guī)則寫(xiě)到控件中

  

    
輸入您的名字，郵箱，URL，備注。
    

      Name (必需, 最小兩個(gè)字母)
      
    
    

      E-Mail (必需)
      
    
    

      URL (可選)
      
    
    

      備注 (必需)
      
    
    

      
    
  

2、將校驗(yàn)規(guī)則寫(xiě)到 js 代碼中

$().ready(function() {
// 在鍵盤(pán)按下并釋放及提交后驗(yàn)證提交表單
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "請(qǐng)輸入您的名字",
      lastname: "請(qǐng)輸入您的姓氏",
      username: {
        required: "請(qǐng)輸入用戶(hù)名",
        minlength: "用戶(hù)名必需由兩個(gè)字母組成"
      },
      password: {
        required: "請(qǐng)輸入密碼",
        minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母"
      },
      confirm_password: {
        required: "請(qǐng)輸入密碼",
        minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母",
        equalTo: "兩次密碼輸入不一致"
      },
      email: "請(qǐng)輸入一個(gè)正確的郵箱",
      agree: "請(qǐng)接受我們的聲明",
      topic: "請(qǐng)選擇兩個(gè)主題"
     }
    })
});

messages 處，如果某個(gè)控件沒(méi)有 message，將調(diào)用默認(rèn)的信息

  

    
驗(yàn)證完整的表單
    

      名字
      
    
    

      姓氏
      
    
    

      用戶(hù)名
      
    
    

      密碼
      
    
    

      驗(yàn)證密碼
      
    
    

      Email
      
    
    

      請(qǐng)同意我們的聲明
      
    
    

      我樂(lè)意接收新信息
      
    
    
      
主題 (至少選擇兩個(gè)) - 注意：如果沒(méi)有勾選“我樂(lè)意接收新信息”以下選項(xiàng)會(huì)隱藏，但我們這里作為演示讓它可見(jiàn)
      
        Marketflash
      
      
        Latest fuzz
      
      
        Mailing list digester
      
      Please select at least two topics you'd like to receive.
    
    

      
    
  

說(shuō)明：

• required: true 值是必須的。

• required: "#aa:checked" 表達(dá)式的值為真，則需要驗(yàn)證。

• required: function(){} 返回為真，表示需要驗(yàn)證。

后邊兩種常用于，表單中需要同時(shí)填或不填的元素。

常用方法及注意問(wèn)題

1、用其他方式替代默認(rèn)的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

使用 ajax 方式

$(".selector").validate({     
 submitHandler: function(form) 
   {      
      $(form).ajaxSubmit();     
   }  
 })

可以設(shè)置 validate 的默認(rèn)值，寫(xiě)法如下：

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

如果想提交表單, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只驗(yàn)證不提交表單

如果這個(gè)參數(shù)為true，那么表單不會(huì)提交，只進(jìn)行檢查，調(diào)試時(shí)十分方便。

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

如果一個(gè)頁(yè)面中有多個(gè)表單都想設(shè)置成為 debug，則使用：

$.validator.setDefaults({
   debug: true
})

3、ignore：忽略某些元素不驗(yàn)證

ignore: ".ignore"

4、更改錯(cuò)誤信息顯示的位置

errorPlacement：Callback

指明錯(cuò)誤放置的位置，默認(rèn)情況是：error.appendTo(element.parent());即把錯(cuò)誤信息放在驗(yàn)證的元素后面。

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

到此，關(guān)于“jquery-validate怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！