jquery.validate.js对 form表单的验证

1、引入jquery.validate.js；引入文件要在jQuery文件之后

2、直接在js中验证，直接上实例：

//内容验证
    $().ready(function() {
        //图片拓展名
        jQuery.validator.addMethod("subImg",function(value,element){
                var fileName=element.files[0].name;
                //console.log(fileName);
                //取出上传文件的扩展名
                var lastDotIndex=fileName.lastIndexOf(".");
                var nameLen=fileName.length;
                var suffix=fileName.substring(lastDotIndex+1,nameLen).toLowerCase();
                //console.log(suffix);
                if(suffix!="jpg" && suffix!="png")
                    return false;
                else
                    return true;
            },"请选择图片文件"
        );
        //视频拓展名
        jQuery.validator.addMethod("subFlash",function(value,element){
                var fileName=element.files[0].name;
                //console.log(fileName);
                //取出上传文件的扩展名
                var lastDotIndex=fileName.lastIndexOf(".");
                var nameLen=fileName.length;
                var suffix=fileName.substring(lastDotIndex+1,nameLen).toLowerCase();
                //console.log(suffix);
                if(suffix!="mp4" && suffix!="avi")
                    return false;
                else
                    return true;
            },"请选择视频文件"
        );
        $(".add-form-group").validate({
            ignore:".belong",
            rules: {
                "title":{
                    required:true,
                },
                "detail":{
                    required:true,
                },
                "url_image":{
                    required:true,
                    subImg:true,
                },
                "url":{
                    required:true,
                    subFlash:true,
                },
            },
            messages: {
                "title":{
                    required:"请输入标题",
                    maxlength:"内容要小于20字符"
                },
                "detail":{
                    required:"请输入描述内容",
                },
                "url_image":{
                    required:"请选择图片",
                },
                "url":{
                    required:"请选择视频",
                }
            },
            errorPlacement: function (error, element) {
                var $tip=element.parent().find(".form-tip");
                var $file=element.parents(".group-box").find(".select-name");
                if(element.is(":file")){
                    error.appendTo($file)
                }else{
                    error.appendTo($tip);
                }
            }
        })
    });

3、常用功能：

（1）jQuery.validator.addMethod("method",function(){})自定义验证的方法

（2）$("form").validate({}),选中需要验证的表单验证

（3）验证中的ignore属性设置忽略验证的内容，默认为忽略隐藏的内容，当有display:none的内容时,特别注意重新设置属性值

（4）rules与messages的对象名，均为需要验证的输入框的name属性值

（5）debug属性设置为true时，表单只验证，不提交。常用于调试与多表单的验证功能

（6）errorPlacement: function (error, element) {error.appendTo()}设置提示内容的显示位置，element为验证的元素。