jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何使用jquery验证来自输入数组的至少一个输入大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个结构化输入数组(如注册人,名字,电话,电子邮件),如下面HTML.

$('#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">&nbsp;&nbsp;&nbsp;26-27 April 2018,Malaysia<br>
    <input type="checkBox" name="event" value="3-4 May 2018,Grand Hyatt,Singapore">&nbsp;&nbsp;&nbsp;3-4 May 2018,Singapore<br>
    <input type="checkBox" name="event" value="Royal Plaza Hotel,Mongkok,Hong Kong">&nbsp;&nbsp;&nbsp;Royal Plaza Hotel,Hong Kong<br>
    <input type="checkBox" name="event" value="Grand Hyatt,Menteng,Jakarta,Indonesia">&nbsp;&nbsp;&nbsp;Grand Hyatt,Indonesia<br>
  </div>
  <p>&nbsp;</p>
  <p style="text-align: center;"><input type="submit" value="submit" name="submit"></p>
</form>

添加了我的代码小提琴here

它适用于一个注册人.不能使用多个相同的输入.

我的问题是:

>案例1:

如何验证至少一个注册人的所有输入(姓名,电子邮件)是否已填写?
>案例2:

如果一个注册人填写了所有三个输入.然后我只填写第二个注册人的姓名(或电话或电子邮件).然后点击提交.

如何显示第二个注册人的电话和电子邮件错误消息?

如果用户没有注册第二个注册名称或电话或电子邮件.不需要
验证该行. (对3,4,5等其他注册人也一样).

我需要满足这两种情况.

解决方法

在这里,我为每一行添加了类,并通过获取每个行元素的值进行验证.

如上所述,它适用于这两种情况.

HTML代码

<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,请注明来意。