jQuery html5Validate基於HTML5表單驗證插件

一、html5Validate的優點？

  

面向將來的表單驗證

1. 
   

1. 驗證驅動
   驗證信息HTML驅動，例如HTML5中required, pattern, multiple等

2. 驗證形式
   非即時響應，submit驗證，如Chrome瀏覽器的處理；或者弱即時響應，如FireFox瀏覽器僅僅紅色外發光。

3. 驗證交互
   浮動形式，尖角指示。
   

        換言之，所謂面向將來的表單驗證，是遵循W3C HTML5規範的表單驗證，咱們能夠從目前領先的瀏覽器中看到大體雛形。而本文全部展現的html5Validate表單驗證插件，就是基於這個將來設計的。

二、html5Validate插件的驗證機制與原生HTML5驗證

 1) html form表單的參數novalidate或者novalidate值爲false, 則瀏覽器內置表單驗證優先，所有pass以後才輪到插件進行驗證，也就是說，二者是沒有衝突的；

  2)novalidate爲HTML5表單內置的屬性（W3C草案），可讓現代瀏覽器（IE10+, FireFox, Chrome, Opera等）默認不對錶單作驗證（忽略required, pattern等）。html5Validate插件默認novalidate: true也就是說，其默認對包裝器元素添加了novalidate="novalidate"，以阻止瀏覽器的默認驗證

三、如何使用html5Validate表單驗證？

1)、引入JQUERY框架

    <script type="text/javascript" src="../static/lib/jquery-1.10.2.js"></script>

注：若是項目組使用artSeaConfig.js統一加載了該js，在html界面無需重複再引用。

2）、引入html5Validate插件：示意

<script type="text/javascript" src="../static/lib/jquery-html5Validate-min.js"></script>

注：若是項目組使用artSeaConfig.js統一加載了該js，在html界面無需重複再引用。

3)、html前端書寫

必填：required

最大值：max="100"

最小值:min="1"

最大字符長度控制：maxlength="20"

身份證號格式：type="idCard|idCrad1"

日期格式：type="date"

郵箱格式：type="email"

數值格式：type="number"

手機號碼：type="tel"

URL地址：type="url"

郵政編碼:type="ZIPCODE"

radio選擇必填：<div class="mb10">

<p>性別：<input type="radio" id="male" class="vn" name="sexy" required /><label for="male">先生</label>
<input type="radio" id="female" class="vn" name="sexy" required /><label for="female">女士</label></p>
</div>

下拉菜單必填：

<div class="mb10">口味：<select required>
<option value="">請選擇</option>
<option value="1">不好</option>
<option value="2">差</option>
<option value="3">通常</option>
<option value="4">好</option>
<option value="5">很好</option>
</select>

複選框：除了某一個都必填

<div class="mb10">
<p>特點服務：</p>
<p><input type="checkbox" id="speServer1" class="vn" name="speServer" required /><label for="speServer1">寶寶椅</label></p>
<p><input type="checkbox" id="speServer2" class="vn" name="speServer" required /><label for="speServer2">鮮花派送</label></p>
<p><input type="checkbox" id="speServer3" class="vn" name="speServer" /><label for="speServer3">生日蛋糕</label><span class="f9 g6 ml10">除了這個其餘都必選</span></p>
<p><input type="checkbox" id="speServer4" class="vn" name="speServer" required /><label for="speServer4">停車位</label></p>
</div>

textarea長度控制：

<textarea id="comment" class="w460" rows="5" data-max="100" data-min="5" required></textarea>

4)、綁定調用

前端submit提交時，在js中書寫： 

//html5Form爲form表單Id

$("#html5Form").html5Validate(function() {    // 所有驗證經過，該幹嗎幹嗎~~
   能夠調用ajax方法

});

四、參數validate驗證，實際開發中各種驗證層出不窮

    運行機制:validate插件內部是如此運做的，先執行插件內置的驗證，而後，再執行validate這個驗證函數，若是返回值是true，則執行咱們相對錶單進行的回調操做；

      注意須要有Boolean類型返回值，驗證出錯返回false驗證就會中止，效果達到提示

HTML代碼：

<form>
    <p>輸入密碼：<input type ="password" id ="pwd" required data-min ="6" placeholder ="至少6個字符" /></p>
    <p>再次輸入：<input type ="password" id ="pwdCheck" required data-min ="6" /></p>
    <p>你喜歡的美女（至少選擇3項）：</p>
    <div id ="checkBox" class ="checkbox_box"><input id ="checkItem1" type ="checkbox" /><label for ="checkItem1">陳怡君</label>
    <input id ="checkItem2" type ="checkbox" /><label for ="checkItem2">程琳</label>
    <input id ="checkItem3" type ="checkbox" /><label for ="checkItem3">司馬可兒</label>
    <input id ="checkItem4" type ="checkbox" /><label for ="checkItem4">高子文</label>
    <input id ="checkItem5" type ="checkbox" /><label for ="checkItem5">妮妮</label>
    <input id ="checkItem6" type ="checkbox" /><label for ="checkItem6">莫小詩</label>
    <input id ="checkItem7" type ="checkbox" /><label for ="checkItem7">ViKi</label>
    <input id ="checkItem8" type ="checkbox" /><label for ="checkItem8">娜娜</label>
    <input id ="checkItem9" type ="checkbox" /><label for ="checkItem9">周小潔</label>
    <input id ="checkItem10" type ="checkbox" /><label for ="checkItem10">蘇小楠</label></div>
    <p><input type ="submit" value ="點擊~"></p></form>

JS代碼：

$("form").html5Validate(function() {
        alert("驗證所有經過！");        this.submit();//能夠書寫本身想調用的任何函數方法：如ajax方法    }, {
    validate: function() {
        if ($("#pwdCheck").val() !== $("#pwd").val()) {
            $("#pwdCheck").testRemind("先後密碼不一致");            return false;    
        } else if ($("input[type='checkbox']:checked").length < 3) {
            $("#checkBox").testRemind("至少選擇3項");            return false;        }
        return true;    }});

五、針對表單單個因素的校驗

HTML代碼：

<p>暱稱</p><input type ="nickname" class ="nickname" required data-min ="6" data-max ="20" /> 6-20個單詞字符<p><a href ="javascript:" class ="button">檢測</a></p>

JS代碼：

OBJREG.NICKNAME = "^\\w+$";OBJREG["prompt"].nickname = "只能是字母數字以及下劃線";

$(".button").bind("click", function() {
    var nickname = $(".nickname");    if ($.html5Validate.isAllpass(nickname)) {
        alert("驗證經過！");    
    }});

六、正則表達式的規則添加

    jquery-html5Validate.js在以下能夠作相應的擴展。

 

// 全局對象，可擴展OBJREG = {EMAIL:"^[a-z0-9._%-]+@([a-z0-9-]+\\.)+[a-z]{2,4}$",NUMBER: "^\\-?\\d+(\\.\\d+)?$",URL:"^(http|https|ftp)\\:\\/\\/[a-z0-9\\-\\.]+\\.[a-z]{2,3}(:[a-z0-9]*)?\\/?([a-z0-9\\-\\._\\?\\,\\'\\/\\\\\\+&amp;%\\$#\\=~])*$",TEL:"^1\\d{10}$",ZIPCODE:"^\\d{6}$",IDCARD:"^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])((\\d{4})|\\d{3}[A-Z])$",IDCARD1:"^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$","prompt": {radio: "請選擇一個選項",checkbox: "若是要繼續，請選中此框","select": "請選擇列表中的一項",email: "請輸入電子郵件地址",url: "請輸入網站地址",tel: "請輸入手機號碼",number: "請輸入數值",date: "請輸入日期",pattern: "內容格式不符合要求",empty: "請填寫此字段",multiple: "多條數據使用逗號分隔",idcard:"請輸入身份證號",idcard1:"請輸入身份證號"}};