jQuery validate

利用 css (class屬性), 只能處理預設驗證規則(required, email....)

*Account :

*e-mail :

利用 rules 加入驗證規則與自訂錯誤訊息

Cell Phone :

驗證成功與失敗時的處置

Age1 :

Age2 :

新增移除規則

Test email1:

Test email2:

搭配 Matadata 在 class 屬性中設定驗證規則

Number1 :

自訂驗證規則

Number2 :

Social ID :

驗證規則依存性

勾選為必填

address :

(function(){
    $("#form01").validate({
        debug: true  // 除錯模式
    });
    
    $("#form02").validate({
        rules: {
            cellphone: {  // form.name
                required: true,
                digits: true,
                minlength: 5
            }
        },
        messages: {
            cellphone: {  // form.name
                required: "請填寫電話!",
                digits: "請填寫電話號碼!",
                minlength: $.format("至少填入 {0} 個數值")  // 對應驗證的參數
            }
        },
        debug: true
    });
    
    $("#form03").validate({
        submitHandler: function(form){
            alert("Age1 value : " + $("#age1").val());
            form.submit();
            //$(form).ajaxSubmit();
        },
        invalidHandler: function(form, validator){
            var errors = validator.numberOfInvalids();
            alert($.format("錯誤數 : {0}", errors));
        }
    });
    
    $("#form04").validate();
    $("#testemail1").rules("add", {required:true});
    
    $("#form05").validate();
    
    // 新增驗證規則, 作法一
    $.validator.methods.lessThanSquare = function(value, element, param){
        // @value 輸入的值
        // @element 驗證的目標元件
        // @param 設定規則時的參數
        return value * value < param;
    };
    // 新增驗證規則, 作法二
    $.validator.addMethod("testSocialId", function(value, element, param){
        return /\w\d{9}/.test(value);
    }, "身份證號驗證錯誤");
    $("#form06").validate({
        rules: {
            number2: {
                required: true,
                digits: true,
                lessThanSquare: 100
            },
            socialid: {
                required: true,
                testSocialId: true
            }
        },
        messages: {
            number2: {
                lessThanSquare: "數值錯誤"
            }
        }
    });
    
    $("#form07").validate({
        rules: {
            address: {
                required: "#requiredaddresscheck:checked"
            }
        }
    });
})();