快捷導(dǎo)航

jQuery validate驗(yàn)證插件使用詳解

更新時(shí)間：2016年05月11日 15:00:13 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了jQuery validate驗(yàn)證插件用法，Validate是基于jQuery的一款輕量級(jí)驗(yàn)證插件，支持input,select,textarea的驗(yàn)證，感興趣的小伙伴們可以參考一下

Validate驗(yàn)證插件，內(nèi)置豐富的驗(yàn)證規(guī)則，還有靈活的自定義規(guī)則接口，HTML、CSS與JS之間的低耦合能讓您自由布局和豐富樣式，支持input,select,textarea的驗(yàn)證。

Description

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

jQuery版本：1.7.0+

Usage
載入jQuery、validate

DOM標(biāo)簽驗(yàn)證規(guī)則填寫

<div class="form_control">
 <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="請(qǐng)輸入您的郵箱" data-valid="isNonEmpty||isEmail" data-error="email不能為空||郵箱格式不正確">
</div>
<div class="form_control">
 <select class="required" data-valid="isNonEmpty" data-error="省份必填">
  <option value="">請(qǐng)選擇省份</option>
  <option value="001">001</option>
  <option value="002">002</option>
 </select>
</div>

給需要驗(yàn)證的表單元素的class填入required（不建議在這個(gè)class上做其他樣式）。
建議input用獨(dú)立div包裹，因?yàn)轵?yàn)證的message是從當(dāng)前input的父元素上append生成。
data-tip：在尚未驗(yàn)證而獲取焦點(diǎn)時(shí)出現(xiàn)的提示。
data-valid：驗(yàn)證規(guī)則，若有組合驗(yàn)證，以||符號(hào)分割。
data-error：驗(yàn)證錯(cuò)誤提示，對(duì)應(yīng)data-valid，以||符號(hào)分割。
單選/復(fù)選比較特殊，需要添加元素包裹單選/復(fù)選集合，并在包裹元素上加驗(yàn)證規(guī)則。

<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="標(biāo)簽至少選擇一項(xiàng)" data-type="checkbox">
   <label><input type="checkbox" name="label">紅</label>
   <label><input type="checkbox" name="label">綠</label>
   <label><input type="checkbox" name="label">藍(lán)</label>
 </span>
</div>

JS調(diào)用

//**注意：必須以表單元素調(diào)用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;
  }
 });

表單提交前的驗(yàn)證

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

validate內(nèi)置驗(yàn)證規(guī)則

required:true 必輸字段
remote:"check.php" 使用ajax方法調(diào)用check.php驗(yàn)證輸入值
email:true 必須輸入正確格式的電子郵件
url:true 必須輸入正確格式的網(wǎng)址
date:true 必須輸入正確格式的日期
dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗(yàn)證格式，不驗(yàn)證有效性
number:true 必須輸入合法的數(shù)字(負(fù)數(shù)，小數(shù))
digits:true 必須輸入整數(shù)
creditcard: 必須輸入合法的信用卡號(hào)
equalTo:"#field" 輸入值必須和#field相同
accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）
maxlength:5 輸入長(zhǎng)度最多是5的字符串(漢字算一個(gè)字符)
minlength:10 輸入長(zhǎng)度最小是10的字符串(漢字算一個(gè)字符)
rangelength:[5,10] 輸入長(zhǎng)度必須介于 5 和 10 之間的字符串")(漢字算一個(gè)字符)
range:[5,10] 輸入值必須介于 5 和 10 之間
max:5 輸入值不能大于5
min:10 輸入值不能小于10

例子：
驗(yàn)證用戶名，密碼，確認(rèn)密碼，主頁(yè)，生日，郵箱等
首先引入Jquery、引入jquery.validate.js、引入messages_cn.js并且為表單定義一個(gè)id，為需要驗(yàn)證的控件定義name屬性，并賦值，此插件使用的是控件的name屬性，而非id。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquery郵箱驗(yàn)證.aspx.cs" Inherits="練習(xí).jquery郵箱驗(yàn)證" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
  #aa{ color:Red;}
  </style>
   <script src="Jquery1.7.js" type="text/javascript"></script>
  <script src="jquery.validate.js" type="text/javascript"></script>
  <script src="messages_cn.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {


    $('#form1').validate({
      rules: {
        username: { required: true, minlength: 6, maxlength: 12 },
        password: { required: true, minlength: 6 },
        passwordok:{required: true, equalTo: "#password"},
        index: { required: true, url: true },
        birthday: { required: true, dateISO: true },
        bloodpress:{required: true,digits:true},
        email: { required: true, email: true }
    },
    errorshow: function (error, element) {
      error.appendTo(element.siblings('span'));
    }

 })
    })
  
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
  <table>
  <tr><td>用戶名：</td><td>
  <input name="username" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>密碼：</td><td>
  <input id="password" name="password" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>確認(rèn)密碼：</td><td>
  <input id="repassword" name="passwordok" type="text" /><span id="aa">*</span></td></tr>
   <tr><td>主頁(yè)：</td><td>
  <input name="index" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>生日：</td><td>
  <input name="birthday" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>血壓：</td><td>
  <input name="bloodpress" type="text" /><span id="aa">*</span></td></tr>
 <tr><td>郵箱：</td><td><input name="email" type="text" /><span id="aa">*</span></td></tr>
 <tr><td></td><td>
  <input id="Button1" type="button" value="button" /></td></tr>
</table>
  </div>
  </form>
</body>
</html>

實(shí)現(xiàn)如下效果：