大佬教程收集整理的这篇文章主要介绍了如何使用jquery验证来自输入数组的至少一个输入,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
$('#register_form').validate({ rules: { 'firstname[]': { required: true,},'phone[]': { required: true,'email[]': { required: true,event: { required: true,messages: { 'firstname[]': { required: "Please enter registrant name",'phone[]': { required: "Please enter registrant phone",'email[]': { required: "Please enter registrant email",event: { required: "Please check atleast one event",errorPlacement: function(error,element) { error.appendTo( element.closest("div") ); },});
.registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;} .registrant_table tr td{Border: 1px solid #ccc;height: 42px;font-weight: bolder;} .registrant_table input{Border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;} label.error{Color: red !important;}
<form method="post" action="" name="register_form" id="register_form"> <div> <table class="registrant_table"> <tr> <td>No</td> <td>Official Full Name</td> <td>Mobile Contact</td> <td>Email</td> </tr> <tr> <td>1</td> <td><input type="text" name="firstname[]"></td> <td><input type="text" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> <tr> <td>2</td> <td><input type="text" name="firstname[]"></td> <td><input type="text" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> <tr> <td>3</td> <td><input type="text" name="firstname[]"></td> <td><input type="text" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> <tr> <td>4</td> <td><input type="text" name="firstname[]"></td> <td><input type="text" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> <tr> <td>5</td> <td><input type="text" name="firstname[]"></td> <td><input type="text" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> </table> </div> <br> <div class="col-md-4 col-sm-6 col-xs-12"> <label>Please tick the event you are joining:</label><br> </div> <div class="col-md-8 col-sm-6 col-xs-12 checkBox_container"> <input type="checkBox" name="event" value="26-27 April 2018,Royale Chulan DamanSara,Malaysia"> 26-27 April 2018,Malaysia<br> <input type="checkBox" name="event" value="3-4 May 2018,Grand Hyatt,Singapore"> 3-4 May 2018,Singapore<br> <input type="checkBox" name="event" value="Royal Plaza Hotel,Mongkok,Hong Kong"> Royal Plaza Hotel,Hong Kong<br> <input type="checkBox" name="event" value="Grand Hyatt,Menteng,Jakarta,Indonesia"> Grand Hyatt,Indonesia<br> </div> <p> </p> <p style="text-align: center;"><input type="submit" value="submit" name="submit"></p> </form>
我的问题是:
>案例1:
如何验证至少一个注册人的所有输入(姓名,电子邮件)是否已填写?
>案例2:
如果一个注册人填写了所有三个输入.然后我只填写第二个注册人的姓名(或电话或电子邮件).然后点击提交.
如果用户没有注册第二个注册人名称或电话或电子邮件.不需要
验证该行. (对3,4,5等其他注册人也一样).
我需要满足这两种情况.
如上所述,它适用于这两种情况.
<div> <table class="registrant_table"> <tr class="title"> <td>No</td> <td>Official Full Name</td> <td>Mobile Contact</td> <td>Email</td> </tr> <tr class="in-fields"> <td>1</td> <td><input type="text" value="" name="firstname[]"></td> <td><input type="text" value="" name="phone[]"></td> <td><input type="text" value="" name="email[]"></td> </tr> <tr class="in-fields"> <td>2</td> <td><input type="text" name="firstname[]"></td> <td><input type="text" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> <tr class="in-fields"> <td>3</td> <td><input type="text" name="firstname[]"></td> <td><input type="text" name="phone[]"></td> <td><input type="text" name="email[]"></td> </tr> </table> </div>
样式:
.registrant_table{width: 100%;border: 1px solid #ccc;text-align: center;} .registrant_table tr td{Border: 1px solid #ccc;height: 42px;font-weight: bolder;} .registrant_table input{Border: 0px !important;width: 100%;height: 42px;text-align: center;font-weight: normal;} label.error{Color: red !important;} .err-fields{BACkground-color:red;color: white !important;}
脚本:
$(document).ready(function() { $("#submit").click(function() { var i =1; var atleast = 0; var allempty=0; var anyfield=0; console.clear(); $(".err-fields").remove(); $(".in-fields").each(function(){ var txt = $(this).find("input[name='firstname[]']").val(); var phon = $(this).find("input[name='phone[]']").val(); var mail = $(this).find("input[name='email[]']").val(); console.log($(this)); if((txt!="") && (phon!="") && (mail!="")) {// atleast one atleast++; } else if((txt=="") && (phon=="") && (mail=="")) { allempty++; } else { anyfield++; var txterr=pherr=mailerr=""; if(txt=="") txterr = "Name field is empty"; if(phon=="") pherr = "Contact field is empty"; if(mail=="") mailerr = "Email field is empty"; $('<tr class="err-fields"><td colspan="2">'+txterr+'</td><td>'+pherr+'</td><td>'+mailerr+'</td></tr>').insertAfter($(this).closest('tr')); return false; } }); if(atleast==0 && anyfield==0) { $(".err-fields").remove(); $('<tr class="err-fields"><td colspan="4">Fill atleast one row fields</td></tr>').insertAfter($('table tr:last')); } else if(anyfield==0) { $(".err-fields").remove(); console.log("form submitted"); } }); });
以上是大佬教程为你收集整理的如何使用jquery验证来自输入数组的至少一个输入全部内容,希望文章能够帮你解决如何使用jquery验证来自输入数组的至少一个输入所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。