[Javascript] jQuery Validate Plugin 簡介

簡單記錄一下jQuery validate的用法.
它是用來做網頁上元件的驗證, 例如Textbox需必填, 最大最小長度, email格式...等等的驗證, 是個很方便的client端驗證工具.

使用它時, 當然要先引用jquery.js, 這裡的例子是引用jquery-1.3.2.js的版本, 而jquery.validate.js是用1.9的版本. 而validate程式的格式, 我想只要稍微了解JSON的話, 應該不難懂才對~

P.S: 如果你要在JSFIDDLE測試的話, 需先在左側的[Add Resources]加上jquery.validate.js才行.

HTML:

<form id="form1">
    <input name="cname" /><br/>
    <input type="submit" value="Submit" />
</form>​

Javascript:

$(function(){
    $("#form1").validate({
    
        rules:
                {
                    cname:
                    {
                        required: true,
                        minlength: 2
                    }
                },
        messages:
                {
                    cname:
                    {
                        required: "
<li>Please enter a name.</li>
",
                        minlength: "
<li>Your name is not long enough.</li>
"
                    }
                }
    });
});

執行結果:

如上的Javascript, 在rules裡的required和minlength都是jquery.validate內建的驗證方法, 每一個使用到的rules, 都要有相對應的messages來呼應當發生驗證不合格時, 要顯示什麼訊息.

當然囉~內建的一定無法滿足所有的情況, 這時你可以自已擴充驗證方法, 你可以將要新增的驗證放在jquery.validate.js裡面的method:下面即可, 舉個例子:

在jquery.validate.js加上自訂驗證:

method:
.
.
.
// 驗證不為0
jQuery.validator.addMethod("NoZero", function(value, element)
{
    return this.optional(element) || (!/^0+([.]0+)?$/.test(value));
});
.
.
.

附上個人常用的jQueryValidateExtension，有錯誤再請指教^^