一、導入js庫

<script type="text/javascript" src="<%=basePath%>lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="<%=basePath%>lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="<%=basePath%>lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="<%=basePath%>lib/jquery.validation/1.14.0/messages_zh.js"></script>

注：<%=basePath%>表示項目根目錄

二、jQuery默認校驗規(guī)則

(1)、required:true               必輸字段
(2)、remote:"remote-valid.jsp"   使用ajax方法調(diào)用remote-valid.jsp驗證輸入值
(3)、email:true                  必須輸入正確格式的電子郵件
(4)、url:true                    必須輸入正確格式的網(wǎng)址
(5)、date:true                   必須輸入正確格式的日期，日期校驗ie6出錯，慎用
(6)、dateISO:true                必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)、number:true                 必須輸入合法的數(shù)字(負數(shù)，小數(shù))
(8)、digits:true                 必須輸入整數(shù)
(9)、creditcard:true             必須輸入合法的信用卡號
(10)、equalTo:"#password"        輸入值必須和#password相同
(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

三、中文提示代碼

$.extend($.validator.messages, {
    required: "這是必填字段",
    remote: "請修正此字段",
    email: "請輸入有效的電子郵件地址",
    url: "請輸入有效的網(wǎng)址",
    date: "請輸入有效的日期",
    dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
    number: "請輸入有效的數(shù)字",
    digits: "只能輸入數(shù)字",
    creditcard: "請輸入有效的信用卡號碼",
    equalTo: "你的輸入不相同",
    extension: "請輸入有效的后綴",
    maxlength: $.validator.format("最多可以輸入 {0} 個字符"),
    minlength: $.validator.format("最少要輸入 {0} 個字符"),
    rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),
    range: $.validator.format("請輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
    max: $.validator.format("請輸入不大于 {0} 的數(shù)值"),
    min: $.validator.format("請輸入不小于 {0} 的數(shù)值")
});

四、校驗規(guī)則js代碼

$("#demoform").validate({
        rules:{
            school:{
                required:true
            },
            classes:{
                required:true,
                digits:true
            },
            name:{
                required:true
            },
            studentId:{
                required:true,
                digits:true
            },
            mac:{
                required:true,
                macCheck:true
            },
            province:{
                required:true,
            },
            city:{
                required:true,
            },
            district:{
                required:true,
            }
        },
        onkeyup:false,
        focusCleanup:true,
        success:"valid",
        submitHandler:function(form){
            $("#modal-shenqing-success").modal("show");
            $(form).ajaxSubmit(function(data){
                if(data.statusCode == 1){
                    $.Huimodalalert('學生數(shù)據(jù)錄入成功',3000)
                }else{
                    $.Huimodalalert('學生信息錄入失敗',3000)
                }
            });
        }
    });

五、自定義校驗規(guī)則

$(function () {
//自定義校驗規(guī)則
    jQuery.validator.addMethod(
        "macCheck",function(value,element){
            var mac = /[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}/;
            return this.optional(element)||(mac.test(value));
        },
    "請輸入正確的mac地址")
}