百度谷歌唯一解决方案--解决jQuery Validation插件 相同名称文本框只验证第一个

百度和google了一下“Query Validation多个同名nameinput只能验证第一个”结果搜到满满的一屏显示度接近90%的文章，而且都没啥卵用，只能说遗憾，

除了改插件外，只能取巧了，既然不能验证多个同名 那么我们就投其所好让他们都变成不一样，提交的时候再提交一样就可以了

思路：先获取“表单组”的个数，然后根据“表单组”给每组表单添加当前组的索引来做后缀，同时给每个表单添加required来实现validation验证

弊端：$.validate.Methond("xx",function(){},"tips"),通过这种自定义的方法添加自定义验证方式无法通过行内添加方法名来实现验证，仅支持插件本身自带的验证方法，

可以使用添加

         
    jquery.metadata.js    通过

class="{required:true,minlength:5,equalTo:'#password'}"  

来实现验证

场景：



物流公司name：physical_name

货物单号name：physical_number

发货凭证name：physical_file

name的取值要求：开头必须相同且不会和当前页面其他不需要提交的表单混淆，

                                 原因：方便提交的时候获取表单的数据

表单代码html：

               

<p class="tabble_address_infor clearfix">
<span class="address_infor_left">物流公司：</span>
<span class="address_infor_right"><input type="text" name="physical_name" disabled value="JDKFJD"></span>
</p>
<p class="tabble_address_infor clearfix">
<span class="address_infor_left">货物单号：</span>
<span class="address_infor_right"><input type="text" name="physical_number" disabled  value="121321"></span>
</p>
<div class="tabble_address_infor clearfix">
<span class="address_infor_left"><span class="red">*</span>发货凭证：</span>
<div class="address_infor_right clearfix">

<input type="hidden" name="physical_file"/>

<div class="uploadbox_left proof_empty j-juploadbox_left"> 暂无凭证 </div>

javascript修改后的表单代码html：

<td>

                                    <p class="tabble_address_infor clearfix">

                                        <span class="address_infor_left">物流公司：</span>

                                    <span class="address_infor_right input-group clearfix">

                                        <input type="text" name="physical_name_0" required="" aria-required="true">

                                    </span>

                                    </p>

                                    <p class="tabble_address_infor clearfix">

                                        <span class="address_infor_left">货物单号：</span>

                                    <span class="address_infor_right  input-group clearifx">

                                        <input type="text" name="physical_number_0" required="" aria-required="true">

                                    </span>

                                    </p>

                                    <div class="tabble_address_infor clearfix">

                                        <span class="address_infor_left"><span class="red">*</span>发货凭证：</span>

                                        <div class="address_infor_right clearfix">

                                            <div class="uploadbox_left proof_empty">

                                                暂无凭证

                                            </div>

                                            <div class="uploadbox_right">

                                                <input type="hidden"
name="physical_file_0">

                                                <div class="btn btn-orange btn-sm btn-w80h30 picker j-picker webuploader-container"><div class="webuploader-pick">上传</div><div id="rt_rt_1a1sq8m061pkprfi1ruq42p17hq7" style="position: absolute; top: 0px; left:
0px; width: 80px; height: 30px; overflow: hidden; bottom: auto; right: auto;"><input type="file" name="file" class="webuploader-element-invisible" accept=""><label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255,
255, 255);"></label></div></div>

                                                <p>

                                                    1.上传格式将限于jpg、png、jepg

                                                </p><p>

                                                    2.要求单张图片最大不超过3M

                                                </p>

                                                <p></p>

                                            </div>

                                        </div>

                                    </div>

                                </td>

javascript代码：

根据表单组来生成不重复的长度等于表单组长度的数组，并给每个表单添加“_随机数”

// 定义存放生成随机数的数组
var array=new Array();
// 循环N次生成随机数
for(var i = 0 ; ; i++){
// 只生成多个随机数
if(array.length<$(".table_infor").length){
generateRandom($(".table_infor").length);
}else{
break;
}
}
// 循环遍历随机数数组,替换所有input[type='text']的name
for(var i = 0 ; i < array.length; i++){

for(var v = 0 ; v < $(".table_infor").eq(i).find("input[type='text']").length; v++){/*给input添加随机数后缀*/
var name_attr=$(".table_infor").eq(i).find("input[type='text']").eq(v).attr("name");
$(".table_infor").eq(i).find("input[type='text']").eq(v).attr("name",name_attr+"_"+array[i]);
}

var name_attr=$(".table_infor").eq(i).find("input[type='hidden']").attr("name");
$(".table_infor").eq(i).find("input[type='hidden']").attr("name",name_attr+"_"+array[i]);

}
// 生成随机数的方法
function generateRandom(count){
var rand = parseInt(Math.random()*count);
for(var i = 0 ; i < array.length; i++){
if(array[i] == rand){
return false;
}
}
array.push(rand);
}

提交表单:

var params={list:[]};//将要提交的json格式数据
$(".j-form").each(function(e){
var paramsJson={};
paramsJson={
physical_name:$(".j-form").eq(e).find("input[name^='physical_name']") .val(),
physical_number:$(".j-form").eq(e).find("input[name^='physical_number']").val(),
physical_file:$(".j-form").eq(e).find("input[name^='physical_file']") .val()
};
params.list.push(paramsJson)//接下来，通过jquery的$.ajax({}) 来提交便可
});