表單驗證框架

jQuery Validation 前端表單驗證框架

頁面引用

<!-- jQuery Validation 1.14.0 -->
<script src="/static/assets/plugins/jquery-validation/js/jquery.validate.js"></script>
<script src="/static/assets/plugins/jquery-validation/js/additional-methods.js"></script>
<script src="/static/assets/plugins/jquery-validation/js/localization/messages_zh.js"></script>
 

使用案例

<form:input path="username" class="form-control required" placeholder="使用者名稱" />

$(function () {
    $("#inputForm").validate({
        errorElement: 'span',
        errorClass: 'help-block',

        errorPlacement: function (error, element) {
            element.parent().parent().attr("class", "form-group has-error");
            error.insertAfter(element);
        }
    });
});
 

預設校驗規則說明

• required: true 必輸欄位
• remote: check.php 使用 ajax 方法呼叫 check.php 驗證輸入值
• email: true 必須輸入正確格式的電子郵件
• url: true 必須輸入正確格式的網址
• date: true 必須輸入正確格式的日期
• dateISO: true 必須輸入正確格式的日期（ISO），例如：2009-06-23， 1998/01/22 只驗證格式，不驗證有效性
• number: true 必須輸入合法的數字（負數，小數）
• digits: true 必須輸入整數
• creditcard: 必須輸入合法的信用卡號
• equalTo: #field
  輸入值必須 #field 相同
• accept: 輸入擁有合法字尾名的字串（上傳檔案的字尾）
• maxlength: 5，輸入長度最多是 5 的字串（漢字算一個字元）
• minlength: 10，輸入長度最小是 10 的字串（漢字算一個字元）
• rangelength: [5,10]， 輸入長度必須介於 5 和 10 之間的字串（漢字算一個字元）
• range: [5,10] ，輸入值必須介於 5 和 10 之間
• man: 5，輸入值不能大於 5
• min: 10, 輸入值不能小於 10

自定義校驗規則

$.validator.addMethod("mobile", function(value, element) {
    var length = value.length;
    var mobile =  /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
    return this.optional(element) || (length == 11 && mobile.test(value));
}, "手機號碼格式錯誤");

封裝校驗器

/**
 * jQuery 有效性驗證
 * @constructor
 */
var Validate = function () {

    /**
     * 初始化校驗規則
     */
    var handlerInit = function () {
        $.validator.addMethod("mobile", function (value, element) {
            var length = value.length;
            var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手機號碼格式錯誤");
    };

    /**
     * 表單驗證
     * @param formId
     */
    var handlerValidate = function (formId) {
        $("#" + formId).validate({
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                element.parent().parent().attr("class", "form-group has-error");
                error.insertAfter(element);
            }
        });
    };

    return {
        /**
         * 初始化校驗規則
         */
        init: function () {
            handlerInit();
        },

        /**
         * 表單驗證
         * @param formId
         */
        validateForm: function (formId) {
            handlerValidate(formId);
        }
    }
}();

$(function () {
   Validate.init();
});