jquery.validate.js

参考 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.自定义校验规则
$.validator.addMethod("isChinese", function (value, element) {      
    var chinese = /^[\u4e00-\u9fa5]+$/;    
    return this.optional(element) || (chinese.test(value));
},
"请输入汉字");

//3.设置只校验不提交
$.validator.setDefaults({
    debug: true
});

//4.校验
$('#newsForm').validate({
            errorElement: 'span',    //错误提示显示在创建的span元素中
            errorClass: 'has-error',  //错误提示的样式，这里是用的bootstrap
            focusInvalid: false,
            rules: {
                module: {                  //module对应的是表单元素名称，不是id
                    required: true
                },
                forward2: {
                    required: true
                },
                forward1: {
                    required: true
                },
                title: {
                    required: true
                },
                image1: {
                    required: true
                },
                image2: {
                    required: true
                }
            },

            messages: {
                module: {
                    required: '请选择文章分类'
                },
                forward2: {
                    required: '请输入导语2'
                },
                forward1: {
                    required: '请输入导语1'
                },
                title: {
                    required: '请输入标题'
                },
                image1: {
                    required: '请选择列表图片'
                },
                image2: {
                    required: '请选择详情图片'
                }
            },

            highlight: function (e) {      //校验失败高亮显示当前元素(e)的父级元素(带form-group类的父级)
                $(e).closest('.form-group').addClass('has-error');
            },

            success: function (e) {      //校验成功取消刚才高亮显示
                $(e).closest('.form-group').removeClass('has-error');
                $(e).remove();              //删除错误提示元素
            },

            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());  //错误元素显示的位置
            }
        });

//5.提交时校验，失败代码停止运行
$('#sub').click(function () {
    /** start of 校验*/
    if (!$('#newsForm').valid()) {
        return;
    }
    /** end of 校验*/
    ... ...
});