原文參考(http://www.runoob.com/jquery/jquery-plugin-validate.html) 侵刪

一.引入插件

<script src="../js/jquery.validate.js" type="text/javascript"></script>

二.默認校驗規則

(1)required:true 必輸字段
(2)remote:"check.PHP" 使用ajax方法調用check.php驗證輸入值
(3)email:true 必須輸入正確格式的電子郵件
(4)url:true 必須輸入正確格式的網址
(5)date:true 必須輸入正確格式的日期 日期校驗ie6出錯，慎用
(6)dateISO:true 必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true 必須輸入合法的數字(負數，小數)
(8)digits:true 必須輸入整數
(9)creditcard: 必須輸入合法的信用卡號
(10)equalTo:"#field" 輸入值必須和#field相同
(11)accept: 輸入擁有合法后綴名的字符串（上傳文件的后綴）
(12)maxlength:5 輸入長度最多是5的字符串(漢字算一個字符)
(13)minlength:10 輸入長度最小是10的字符串(漢字算一個字符)(14)rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個字符)(15)range:[5,10] 輸入值必須介于 5 和 10 之間
(16)max:5 輸入值不能大于5
(17)min:10 輸入值不能小于10

三.代碼示例

1.html

<form id="form-two">
    <div class="ewb-r-con">
        <div class="ewb-right-row clearfix">
            <span class="ewb-right-sp1 l">電話：</span>
            <input type="text" class="ewb-r-txt1 ewb-r-txt2 l" name="telephone">
            <span class="ewb-right-sp2 l">*</span>
        </div>
        <div class="ewb-right-row clearfix">
            <span class="ewb-right-sp1 l">Email：</span>
            <input type="text" class="ewb-r-txt1 ewb-r-txt2 l" name="email">
            <span class="ewb-right-sp2 l">*</span>
        </div>
        <div class="ewb-right-row clearfix">
            <span class="ewb-right-sp1 l" title="請輸入類型" required>類型：</span>
            <select class="ewb-r-sel choose-type l">
            </select>
            <span class="ewb-right-sp2 l">*</span>
        </div>
        <div class="clearfix">
            <button type="button" class="ewb-r-btn ewb-r-btn1 sumbit l">提 交</button>
            <button type="button" class="ewb-r-btn ewb-r-btn2 reset l">重 置</button>
        </div>
    </div>
</form>

2.js

$("#form").validate({
    rules: {
        telephone: {
            required: true,
            isMobile: true
        },
        email: {
            required: true,
            email: true
        },
        confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    },
    messages: {
        telephone: {
            required: "請輸入手機號",
            isMobile: "請正確填寫您的號碼"
        },
        email: {
            required: "請輸入郵箱號",
            email: "請正確填寫您的郵箱號"
        },
        confirm_password: {
            required: "請輸入確認密碼",
            minlength: "確認密碼不能小于5個字符",
            equalTo: "兩次輸入密碼不一致不一致"
        }
    }
});
//號碼驗證 拓展插件
jQuery.validator.addMethod("isMobile", function(value, element) {
    var length = value.length;
    var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})|\d{3,4}-?\d{7,9}$/;
    return this.optional(element) || mobile.test(value);
}, "請正確填寫您的號碼");

3.常用js配置參數

1.$("#signupForm").validate({ debug:true });//如果這個參數為true，那么表單不會提交，只進行檢查，調試時十分方便
2.$.validator.setDefaults({ debug: true}) //如果一個頁面中有多個表單都想設置成為debug，用
3.`$("#signupForm").validate({
submitHandler: function(form) { alert("submit!");
form.submit(); }

});`//驗證通過的話執行方法

4.

驗證的觸發方式修改.png