參考 http://blog.csdn.net/windxxf/article/details/7520340

//1.依賴
<script src="/javascripts/jquery-2.0.3.min.js"></script>
<script src="/javascripts/jquery.validate.min.js"></script>

//2.自定義校驗(yàn)規(guī)則
$.validator.addMethod("isChinese", function (value, element) {      
    var chinese = /^[\u4e00-\u9fa5]+$/;    
    return this.optional(element) || (chinese.test(value));
},
"請輸入漢字");

//3.設(shè)置只校驗(yàn)不提交
$.validator.setDefaults({
    debug: true
});

//4.校驗(yàn)
$('#newsForm').validate({
            errorElement: 'span',    //錯(cuò)誤提示顯示在創(chuàng)建的span元素中
            errorClass: 'has-error',  //錯(cuò)誤提示的樣式蘸鲸，這里是用的bootstrap
            focusInvalid: false,
            rules: {
                module: {                  //module對(duì)應(yīng)的是表單元素名稱祟牲，不是id
                    required: true
                },
                forward2: {
                    required: true
                },
                forward1: {
                    required: true
                },
                title: {
                    required: true
                },
                image1: {
                    required: true
                },
                image2: {
                    required: true
                }
            },

            messages: {
                module: {
                    required: '請選擇文章分類'
                },
                forward2: {
                    required: '請輸入導(dǎo)語2'
                },
                forward1: {
                    required: '請輸入導(dǎo)語1'
                },
                title: {
                    required: '請輸入標(biāo)題'
                },
                image1: {
                    required: '請選擇列表圖片'
                },
                image2: {
                    required: '請選擇詳情圖片'
                }
            },

            highlight: function (e) {      //校驗(yàn)失敗高亮顯示當(dāng)前元素(e)的父級(jí)元素(帶form-group類的父級(jí))
                $(e).closest('.form-group').addClass('has-error');
            },

            success: function (e) {      //校驗(yàn)成功取消剛才高亮顯示
                $(e).closest('.form-group').removeClass('has-error');
                $(e).remove();              //刪除錯(cuò)誤提示元素
            },

            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());  //錯(cuò)誤元素顯示的位置
            }
        });

//5.提交時(shí)校驗(yàn)报咳，失敗代碼停止運(yùn)行
$('#sub').click(function () {
    /** start of 校驗(yàn)*/
    if (!$('#newsForm').valid()) {
        return;
    }
    /** end of 校驗(yàn)*/
    ... ...
});