jQuery Validate表單驗證(使用者註冊簡單應用)

1.講解

1.1 Validate 要依賴jQuery的，所以HTML中js的引用關係如下：

        <script type="text/javascript" src="../js/common/jquery-1.11.0.js" ></script>
        <script type="text/javascript" src="../js/common/jquery-validation-1.14.0/jquery.validate.min.js" ></script>
        <script type="text/javascript" src="../js/common/jquery-validation-1.14.0/additional-methods-common.js" ></script>
        <script src="../js/controller/blog-validate.js" type="text/javascript" charset="utf-8"></script>

第一個就不用說了，第二個是驗證外掛（必須引用），第三個是自定義驗證規則，第四個我們自己的js

1.2 註冊form的結構：

<form class="am-form am-form-horizontal yf-form-tips add-form">
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">使用者名稱: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="text" id=""  name="addFormName" placeholder="請輸入您的使用者名稱" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">密碼: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="password" id="password1"  name="addFormPass1" placeholder="請輸入您的密碼" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormName" class="am-u-sm-2 am-form-label">確認密碼: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="password" id=""  name="addFormPass2" placeholder="請再次輸入您的密碼" class="" maxlength="20">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormPhone" class="am-u-sm-2 am-form-label">手機號: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <input type="text" id=""  name="addFormPhone" placeholder="請輸入您的手機號" class="" maxlength="11">
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <label for="addFormAdd" class="am-u-sm-2 am-form-label am-vertical-align-top yf-pt0">聯絡地址: </label>
                    <div class="am-u-sm-10 yf-pl10">
                        <textarea id="" placeholder="請輸入您的聯絡地址" name="addFormAdd"  class="" maxlength="100"></textarea>
                        <span class="yf-error-tip"></span>
                    </div>
                </div>
                <div class="am-form-group am-g-collapse">
                    <div class="am-u-sm-offset-2 yf-pl10">
                        <button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>
                    </div>
                </div>
</form>

1.3 主要的js(blog-validate.js)：

    //表單驗證規則
    var formValid = $(".add-form").validate({
        rules: {
            "addFormName":{
                "required":true,        //必填欄位
            },
            "addFormPass1":{
                "required":true        
            },
            "addFormPass2":{
                "required":true,
                "equalTo": "#password1"        //輸入值必須和 #password1 相同
            },
            "addFormPhone":{
                "required":true,
                "digits":true,        //必須輸入整數
                "minlength":11        //輸入長度最小是 11
            },
            "addFormAdd":{
                "required":true        
            }
        },
        messages: {
            "addFormName":{
                "required":"使用者名稱不能為空哦"
            },
            "addFormPass1":{
                "required":"密碼不能為空哦"
            },
            "addFormPass2":{
                "required":"確認密碼不能為空哦",
                "equalTo":"兩次輸入的密碼不一致哦"
            },
            "addFormPhone":{
                "required":"手機號不能為空哦",
                "digits":"手機號格式不正確哦",
                "minlength":"手機號格式不正確哦",
            },
            "addFormAdd":{
                "required":"地址不能為空哦"
            }
        },
        errorPlacement:function(error,element) {
            error.appendTo(element.siblings(".yf-error-tip"));
        }
    });

    //提交前開始驗證
    var submitInfo = function(){
        if($('.add-form').valid()){
            alert('恭喜你，驗證通過了！');
        };
    }

說明：

　　主要通過 $('.add-form').valid() 觸發驗證；

　　提示資訊可在 errorPlacement 中配置放置的位置，提示預設的樣式是”error”，如需修改，參考validate ()可選項中的”errorClass”

2.有幾個特別要注意的地方：

1. validate ()的物件$(".add-form")對應的DOM標籤必須是form標籤
2. 執行$(".add-form").validate時，form在HTML結構中是存在的，類似jquery的remove之後或者angularJs的ngIf，都會導致驗證失敗
3. validate()的屬性”rules”必須對應驗證表單中標籤的name屬性
4. 驗證規則可以直接寫在HTML中（不推薦，提示資訊也不好處理），比如：

<input type="text" id=""  name="addFormName" placeholder="請輸入您的使用者名稱" class="" maxlength="20" required minlength='2'>