jQuery Validate

jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。

該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使

用英語作為錯誤信息，且已翻譯成其他 37 種語言。

該插件是由 J?rn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit(量子系統) 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。目前版本是 1.14.0

訪問 jQuery Validate 官網，下載最新版的 jQuery Validate 插件。

CY提供的 1.14.0 版本下載地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip

1.導入 js 庫（使用提供的CDN）

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js">
 

</script>

插件描述：Validate是基於jQuery的一款輕量級驗證插件，內置豐富的驗證規則，還有靈活的自定義規則接口，HTML、CSS與JS之間的低耦合能讓您自由布局

和豐富樣式，支持input,select,textarea的驗證。

Description

瀏覽器支持：IE7+ 、Chrome、Firefox、Safari、Mobile Browser

jQuery版本：1.7.0+

2.Usage

載入jQuery、validate

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

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

3.DOM標簽驗證規則填寫

<div class="form_control">
  <input class="required" value="[email protected]" type="text" name="email" data-tip="請輸入您的郵箱" 
data-valid="isNonEmpty||isEmail" data-error="email不能為空||郵箱格式不正確">
</div>
<div class="form_control">
  <select class="required" data-valid="isNonEmpty" data-error="省份必填">
    <option value="">請選擇省份</option>
    <option value="001">001</option>
    <option value="002">002</option>
  </select>
</div>

• 給需要驗證的表單元素的class填入required（不建議在這個class上做其他樣式）。
• 建議input用獨立div包裹，因為驗證的message是從當前input的父元素上append生成。
• data-tip：在尚未驗證而獲取焦點時出現的提示。
• data-valid：驗證規則，若有組合驗證，以||符號分割。
• data-error：驗證錯誤提示，對應data-valid，以||符號分割。
• 單選/復選比較特殊，需要添加元素包裹單選/復選集合，並在包裹元素上加驗證規則。

<div class="form_control">
  <span class="required" data-valid="isChecked" data-error="性別必選" data-type="radio">
      <label><input type="radio" name="sex">男</label>
      <label><input type="radio" name="sex">女</label>
      <label><input type="radio" name="sex">未知</label>
  </span>
</div>
<div class="form_control">
  <span class="required" data-valid="isChecked" data-error="標簽至少選擇一項" data-type="checkbox">
      <label><input type="checkbox" name="label">紅</label>
      <label><input type="checkbox" name="label">綠</label>
      <label><input type="checkbox" name="label">藍</label>
  </span>
</div>
JS調用

//**註意：必須以表單元素調用validate**
  $(‘form‘).validate({
    type:{
      isChecked: function(value, errorMsg, el) {
        var i = 0;
        var $collection = $(el).find(‘input:checked‘);
        if (!$collection.length) {
          return errorMsg;
        }
      }
    },
    onFocus: function() {
      this.parent().addClass(‘active‘);
      return false;
    },
    onBlur: function() {
      var $parent = this.parent();
      var _status = parseInt(this.attr(‘data-status‘));
      $parent.removeClass(‘active‘);
      if (!_status) {
        $parent.addClass(‘error‘);
      }
      return false;
    }
  });

表單提交前的驗證

  $(‘form‘).on(‘submit‘, function(event) {
    event.preventDefault();
    $(this).validate(‘submitValidate‘); //return true or false;
  });

jQuery Validate