百度谷歌唯一解决方案--解决jQuery Validation插件 相同名称文本框只验证第一个
来源:互联网 发布:日本化妆品 知乎 编辑:程序博客网 时间:2024/05/16 17:21
百度和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({}) 来提交便可});
- 百度谷歌唯一解决方案--解决jQuery Validation插件 相同名称文本框只验证第一个
- jquery validate不能验证多个相同的Name 只验证第一个的方案
- Jquery validate验证表单时多个name相同的元素只验证第一个的问题
- jquery validate 多个相同name的文本框验证
- jQuery表单验证插件 Validation
- jQuery-validation验证表单插件
- Jquery Validation 插件验证手机号
- 表单验证插件jQuery Validation
- jQuery插件Validation表单验证
- jQuery Validation Plugin验证插件手动验证
- jQuery 插件 jQuery Validation (表单验证)
- jQuery插件 jQuery Validation基本验证1
- jQuery学习之:Validation表单验证插件
- 表单验证插件 jQuery plugin: Validation
- jQuery学习之:Validation表单验证插件
- Validation-jQuery表单验证插件使用方法
- 开源轻量级jquery validation 验证插件
- jQuery Validation Plugin客户端表单验证插件
- 修改Eclipse中author后面显示的内容
- hdu5505 GT and numbers(BestCoder Round #60)
- BCD-七段数码管显示译码器
- JSP自定义标签详解
- 《剑指offer》面试题:将数组中的奇数放在数组前半部分
- 百度谷歌唯一解决方案--解决jQuery Validation插件 相同名称文本框只验证第一个
- [黑马训练营]IOS C语言 内存管理
- [iOS]关于计算文字所占范围大小的方法
- java中return与finally的执行顺序
- bzoj3888【Usaco2015 Jan】Stampede
- JVM 内存基础存储关系结构图
- xargs命令的使用过程中一个小领悟:管道与xargs的差别
- Hadoop-2.5.0-cdh5.2.1以及Hadoop-2.5.0-cdh5.3.2 获取源码及编译
- yum只下载不安装和wget下载指定目录