jquery.validate.js表单验证 jquery.validate.js的用法

jquery.validate.js这个插件已经用了2年多了，是一个不可多得的表单验证最方便快捷的插件。基于jquery的小插件，基本小白一学就会上手，对于项目表单页面比较多，元素比较多的校验，该插件基本分分钟就解决完。

本来想好好总结一下的。暂放demo。

想参考一下这篇楼主的博文。感觉总结的太好了！

http://www.cnblogs.com/si-shaohua/p/3780321.html#undefined

根据博主的总结，我这里主要是想提一下jquery.metadata.js(下载地址：http://www.bvbcode.com/code/g9tf82ml-899335-down）

他的用法是结合jquery.validate.js

写法基本是这个样子的class={};

前端写法无限多，这里就不细细区别那种用法更好，没那精力。其实引用这个写法的主要原因是他的写法会帮助我们动态校验自动生成的表格元素，总所周知啊：jquery.validate.js这个插件是基于表单的name名称进行校验的，而对于动态生成的表单这个name就有点困难困难了。（除非你们想到name[i],i++这种低级想法。因为后端基本不会给name起name1,name2,name3这种名字的，哪家也不这么在数据库里玩。除非自己本地的同学们，哈哈哈！）废话少说。这里就显出jquery.metadata.js他的高尚之品质！

以下是我项目中的一个小代码

 $(".add).on("click",function(){

var str='<tr class="trsec">'+
      '<td><select name="assessVoList[][productMetadataId]" id="" class="risk">'+options+'</select></td>'+
      '<td><select name="assessVoList[][LossTargetName]" class="subject">'+LossTargetNameid+'</select></td>'+
      '<td><select name="assessVoList[][LossTargetType]" class="sslb">'+lossFeeTypeListid+'</select></td>'+
      '<td><input type="text" value="'+item.losshow+'" placeholder="损失程度" name="assessVoList[][losshow]" class="losshow {required:true}"/></td>'+
      '<td><a class="sbtn delete deleteone" data-toggle="modal" data-target=".mydelete">删除</a></td>'+
      '</tr>';

$(".two").find("tbody").append(str);

})

点击按钮，给表格动态增加一条数据时，对表单里的元素进行校验。

会自动进行校验的。

另外一种情况的解决方法：

校验该插件，我使用了jquery.validate.js. 针对name名称一致的，使用了

'assessVoList[][losshow]':{
    required:true,
},

'assessVoList[][losshow]':{
    required:“不能为空”,
},
另外需要插入一段js代码，来解决相同name名字时也校验。

rulesCache[this.name] = true;
return true;

if ($.validator) {
    $.validator.prototype.elements = function () {
        var validator = this,
            rulesCache = {};

        // select all valid inputs inside the form (no submit or reset buttons)
        return $(this.currentForm)
            .find("input, select, textarea")
            .not(":submit, :reset, :image, [disabled]")
            .not(this.settings.ignore)
            .filter(function () {
                if (!this.name && validator.settings.debug && window.console) {
                    console.error("%o has no name assigned", this);
                }
                //注释这行代码
                // select only the first element for each name, and only those with rules specified
                //if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
                //    return false;
                //}
                rulesCache[this.name] = true;
                return true;
            });
    }
}

总之，很好用，马上动手做一下吧！