[jQuery Validate]前端校驗

前言

    jQuery Validate 插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，滿足應用程序各種需求。
    該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。

導入JS

    jquery.js
    jquery.validate.min.js

規則

    jQuery Validate 插件支持多種校驗規則,當規則不符合約定規範時,會提示默認信息,我們可以重寫插件的默認提示。

(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), 漢語, 漢語)  
     */
    $.extend($.validator.messages, {
        required : "必填項",
        number : "請輸入有效的數字",
        digits : "只能輸入數字",
        maxlength : $.validator.format("最多輸入 {0} 個字符"),
        minlength : $.validator.format("最少輸入 {0} 個字符")
    });

    $.validator.addMethod("checkLoginName", function(value, element) {
        var tel = /^(?![0-9]+$)?(?![a-zA-Z]+$)?[0-9A-Za-z]{1,12}$/;
        return this.optional(element) || (tel.test(value));
    }, "僅支持由字母或數字");

    jQuery.validator.addMethod("onlyletter", function(value, element) {
        var tel = /^[A-Za-z]*$/;
        return this.optional(element) || (tel.test(value));
    }, "僅支持英文字符");

    jQuery.validator.addMethod("mobileChk", function (value, element) {
        var phone = /^1\d{10}$/;
        return this.optional(element) || (phone.test(value));
    }, "請輸入有效的手機號碼");

}));

上面的示例中可以看到，我們重寫了一部分默認提示，同時還可以增加校驗規則，通過jQuery.validator.addMethod即可。

那麼我們如何設置插件的一些默認方法呢？

$(document).ready(function(){
    $.validator.setDefaults({
        errorPlacement:function(error,element) {
            var $errorPlacement = element.closest(".radio-list");
            if (element.parent(".input-group").size() > 0) {
                error.appendTo(element.parent(".input-group"));
            }else if ($errorPlacement.size() > 0) {
                error.appendTo($errorPlacement);
                $("input[type='radio']").each(function(i,e){
                    $(e).removeClass("error");
                });
            }
        }
    });
});

我們通過$.validator.setDefaults重寫了errorPlacement方法，這樣就可以控制所有前端JS的錯誤信息元素。

Ajax

    一般很多場景下我們是通過ajax發送數據的,而不是button的submit,這個時候我們如何使用jQuery Validate來觸發校驗是否通過呢?

var flag = $("#form").valid();
if(flag){//...}

前端示例

<form id="form">
    <div class="form-body" style="padding-top: 0px !important;">
        <div class="row row-margin">
            <div class="row form-group">
                <label class="control-label col-md-2 text-right">姓名：</label>
                <div class="col-md-3 control-wrapper input-group">
                    <input type="text" class="form-control" name="name"/>
                </div>

                <label class="control-label col-md-2 text-right">用戶名：</label>
                <div class="col-md-3 control-wrapper input-group">
                    <input type="text" class="form-control" name="userName"/>
                </div>
            </div>
        </div>
    </div>
</form>

簡單設置下錯誤提示樣式

.error{
    float: left;
    display: inline-block !important;
    padding: 3px 5px;
    height: 20px;
    line-height: 15px;
    background-color: #ff0000;
    padding: 3px 5px;
}

至此，我們就可以簡單的使用jQuery Validate來做前端校驗了。