验证具有多个用户记录的预订表单 [英] Validate a booking form with more than one user record

问题描述

我需要在提交页面时使用jQuery或JavaScript来验证我的表单。

验证我的表单的条件是：

• 第一名乘客的姓名，年龄和电子邮件是强制性的。


• 如果用户输入任何2到10个乘客名单的附加名称，则必须添加额外乘客的年龄和电子邮件ID。


• 电子邮件所有乘客的身份证件都应该是唯一的和有效的。


• 用户应同意条款和条件。

这是我的HTML。

 < form> < DIV> < input type =textid =fn1placeholder =全名/> < input type =numberid =ag1placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em1placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn2placeholder =Full Name/> < input type =numberid =ag2placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em2placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn3placeholder =全名/> < input type =numberid =ag3placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em3placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn4placeholder =Full Name/> < input type =numberid =ag4placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em4placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn5placeholder =Full Name/> < input type =numberid =ag5placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em5placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn6placeholder =Full Name/> < input type =numberid =ag6placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em6placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn7placeholder =全名/> < input type =numberid =ag7placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em7placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn8placeholder =全名/> < input type =numberid =ag8placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em8placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn9placeholder =Full Name/> < input type =numberid =ag9placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em9placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn10placeholder =全名/> < input type =numberid =ag10placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em10placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < input type =checkboxvalue =同意我们的条款和协议/> < input type =submitvalue =submit/> < / form>  

  if $（'＃fn1'）。val（）=={event.preventDefault（）; $（'＃fn1'）focus（）; return} if（$（'＃fn1'）。val =（））（{$（'＃ag1'）。val（）==||！emailpattern.test（$（'＃em1'）。val（））））{event.preventDefault（） ; $（'＃fn1'）。focus（）; return}  

我为每个乘客单独做了这个，我没有代码检查唯一的电子邮件ID。

解决方案

我们可以重申四要求如下：

• 必须输入至少一个名称。




• 对于输入的每个名称，必须指定年龄和电子邮件地址。




• 每个名称必须有唯一的电子邮件地址




• 条款和条件复选框必须被检查。

下面的代码片段验证了所有这些要求。请注意以下内容。

• HTML包含单个条目，在页面加载时重复。全局变量 numEntries 指定表单中所需的条目数。




• 我们使用 entryCount 以跟踪表单中输入的名称数量。




• 使用哈希来存储名称对应于每个电子邮件地址。我们在这个散列中查找每个新的电子邮件地址，以查看是否已经分配了一个名称。

  var numEntries = 10; //从字符串的起始和结尾移除空格（）返回s.replace（/ ^ \s + | \s + $ /，''）;} window.onload = function（）{//创建十个条目并将其存储在数组中。 var form = document.getElementById（'entryForm'），entry = form.getElementsByTagName（'div'）[0]，nextSibling = entry.nextSibling，entries = [entry]; for（var i = 1; i< numEntries; ++ i）{var newEntry = entry.cloneNode（true）; form.insertBefore（newEntry，nextSibling）; entries.push（newEntry）; entry = newEntry; } //使查找每个条目的字段值变得容易。 entry.forEach（function（entry）{['name'，'age'，'email'，'phone'] forEach（function（field）{entry [field] = entry.getElementsByClassName（field）[0];} ）;}）; //将验证功能附加到表单提交按钮。 document.getElementById（'submitButton'）。onclick = function（）{if（！document.getElementById（'agreementBox'）。checked）{alert（'错误：你必须同意我们的条款和条件。返回; } var entryCount = 0，emailHash = {}; for（var i = 0; i< numEntries; ++ i）{var entry = entries [i]，name = strip（entry.name.value）; if（strip（entry.name.value）！==''）{var age = strip（entry.age.value），email = strip（entry.email.value）; if（age ===''|| email ===''）{alert（'错误：你必须输入'+ name +'的年龄和电子邮件地址。返回; } if（emailHash [email]！== undefined）{alert（'Error：'+ name +'与'+ emailHash [email] +'有相同的电子邮件地址，地址必须是唯一的。返回; } emailHash [email] = name; ++ entryCount; }} if（entryCount == 0）{alert（'Error：你必须输入至少一个名字。返回; } alert（成功！表单已验证）; };};  

  .agreement {font-family：sans -serif; font-size：12px;}  

 < form id = entryForm > < DIV> < input class =nametype =textplaceholder =Full Name/> < input class =agetype =numberplaceholder =Age/> <选择> < option value =Male> Male< / option> < option value =Female> Female< / option> < /选择> < input class =emailtype =emailplaceholder =E-mail/> < input class =phonetype =numberplaceholder =Mobile/> < / DIV> < p class =agreement> < input id =agreementBoxtype =checkbox>同意我们的条款和条件< / p> < input id =submitButtontype =submitvalue =submit/>< / form>  

p>

以下是使用您在问题中张贴的HTML的版本。

  /从字符串的开头和结尾移除空格（）函数{return s.replace（/ ^ \s + | \s + $ /，''）;} window.onload = function（）{//找到输入输入区域并将其存储在数组中。 var form = document.getElementsByTagName（'form'）[0]; var entries = form.getElementsByTagName（'div'）; for（var i = 0; i< entries.length; ++ i）{var entry = entries [i]，inputs = entry.getElementsByTagName（'input'）; //使查找每个条目的字段值变得容易。 ['name'，'age'，'email'，'phone'] forEach（function（field，ix）{entry [field] = inputs [ix];}）; } //将验证函数附加到表单提交按钮。 var inputs = form.getElementsByTagName（'input'），agreementBox = inputs [inputs.length  -  2]，submitButton = inputs [inputs.length  -  1]; submitButton.onclick = function（）{if（！agreementBox.checked）{alert（'错误：你必须同意我们的条款和条件。返回; } var entryCount = 0，emailHash = {}; for（var i = 0; i< entries.length; ++ i）{var entry = entries [i]，name = strip（entry.name.value）; if（strip（entry.name.value）！==''）{var age = strip（entry.age.value），email = strip（entry.email.value）; if（age ===''|| email ===''）{alert（'错误：你必须输入'+ name +'的年龄和电子邮件地址。返回; } if（emailHash [email]！== undefined）{alert（'Error：'+ name +'与'+ emailHash [email] +'有相同的电子邮件地址，地址必须是唯一的。返回; } emailHash [email] = name; ++ entryCount; }} if（entryCount == 0）{alert（'Error：你必须输入至少一个名字。返回; } alert（成功！表单已验证）; };};  

  form {font-family：衬线; font-size：12px;}  

 < form> < DIV> < input type =textid =fn1placeholder =全名/> < input type =numberid =ag1placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em1placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn2placeholder =Full Name/> < input type =numberid =ag2placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em2placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn3placeholder =全名/> < input type =numberid =ag3placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em3placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn4placeholder =Full Name/> < input type =numberid =ag4placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em4placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn5placeholder =Full Name/> < input type =numberid =ag5placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em5placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn6placeholder =Full Name/> < input type =numberid =ag6placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em6placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn7placeholder =全名/> < input type =numberid =ag7placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em7placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn8placeholder =全名/> < input type =numberid =ag8placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em8placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn9placeholder =Full Name/> < input type =numberid =ag9placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em9placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < DIV> < input type =textid =fn10placeholder =全名/> < input type =numberid =ag10placeholder =Age/> < select>< option value =Male> Male< / option>< option value =Female> Female< / option>< / select> < input type =emailid =em10placeholder =E-mail/> < input type =numberplaceholder =Mobile/> < / DIV> < input type =checkboxvalue =同意我们的条款和协议/> < input type =submitvalue =submit/> < / form>  

I need to validate my form using jQuery or JavaScript when the page is submitted.

The conditions to validate my form are:

• Name, age, and email of first passenger is compulsory.
• If user enters additional names of any 2 to 10 passengers list then it should be mandatory to add age and email IDs of additional passengers.
• Email IDs of all passengers should be unique and valid.
• The user should agree to the terms and conditions.

Here's my HTML.

    <form>
        <div>
            <input type="text" id="fn1" placeholder="Full Name" />
            <input type="number" id="ag1" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em1" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn2" placeholder="Full Name" />
            <input type="number" id="ag2" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em2" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn3" placeholder="Full Name" />
            <input type="number" id="ag3" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em3" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn4" placeholder="Full Name" />
            <input type="number" id="ag4" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em4" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn5" placeholder="Full Name" />
            <input type="number" id="ag5" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em5" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn6" placeholder="Full Name" />
            <input type="number" id="ag6" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em6" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn7" placeholder="Full Name" />
            <input type="number" id="ag7" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em7" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn8" placeholder="Full Name" />
            <input type="number" id="ag8" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em8" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn9" placeholder="Full Name" />
            <input type="number" id="ag9" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em9" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn10" placeholder="Full Name" />
            <input type="number" id="ag10" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em10" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>

        <input type="checkbox" value="Agree to our terms and agreement" />

        <input type="submit" value="submit" />
    </form>

if ($('#fn1').val() == ""{
    event.preventDefault();
    $('#fn1').focus();
    return
    }


if ($('#fn1').val() != "" && ($('#ag1').val() == "" || !emailpattern.test($('#em1').val()))) {
   event.preventDefault(); 
  $('#fn1').focus();
    return
}

I did this individually for every passenger. I have no code to check unique email IDs.

解决方案

We can restate the four requirements as follows:

• At least one name must be entered.

• For each name that has been entered, the age and email address must be specified.

• There must be a unique email address for each name.

• The "terms and conditions" checkbox must be checked.

The snippet below validates all of these requirements. Note the following.

• The HTML contains a single entry which is duplicated when the page loads. The global variable numEntries specifies the desired number of entries in the form.

• We use entryCount to keep track of how many names have been entered into the form.

• A hash is used to store the name corresponding to each email address. We look up each new email address in this hash to see if a name has already been assigned.

var numEntries = 10;

// Remove whitespace from beginning and end of string.
function strip(s) {
  return s.replace(/^\s+|\s+$/, '');
}

window.onload = function () {
  // Make ten entries and store them in an array.
  var form = document.getElementById('entryForm'),
      entry = form.getElementsByTagName('div')[0],
      nextSibling = entry.nextSibling,
      entries = [entry];
  for (var i = 1; i < numEntries; ++i) {
    var newEntry = entry.cloneNode(true);
    form.insertBefore(newEntry, nextSibling);
    entries.push(newEntry);
    entry = newEntry;
  }
  // Make it easy to look up field values for each entry.
  entries.forEach(function (entry) {
    ['name', 'age', 'email', 'phone'].forEach(function (field) {
      entry[field] = entry.getElementsByClassName(field)[0];
    });
  });
  // Attach a validation function to the form submission button.
  document.getElementById('submitButton').onclick = function () {
    if (!document.getElementById('agreementBox').checked) {
      alert('Error: you must agree to our terms and conditions.');
      return;
    }
    var entryCount = 0,
        emailHash = {};
    for (var i = 0; i < numEntries; ++i) {
      var entry = entries[i],
          name = strip(entry.name.value);
      if (strip(entry.name.value) !== '') {
        var age = strip(entry.age.value),
            email = strip(entry.email.value);
        if (age === '' || email === '') {
          alert('Error: you must enter the age and email address of ' + name + '.');
          return;
        }
        if (emailHash[email] !== undefined) {
          alert('Error: ' + name + ' has the same email address as ' +
                emailHash[email] + '. Addresses must be unique.');
          return;
        }
        emailHash[email] = name;
        ++entryCount;
      }
    }
    if (entryCount == 0) {
      alert('Error: you must enter at least one name.');
      return;
    }
    alert('Success! The form has been validated.');
  };
};

.agreement {
  font-family: sans-serif;
  font-size: 12px;
}
  

<form id="entryForm">
  <div>
    <input class="name" type="text" placeholder="Full Name" />
    <input class="age" type="number" placeholder="Age" />
    <select>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <input class="email" type="email" placeholder="E-mail" />
    <input class="phone" type="number" placeholder="Mobile" />
  </div>
  
  <p class="agreement">
    <input id="agreementBox" type="checkbox"> Agree to our terms and conditions
  </p>

  <input id="submitButton" type="submit" value="submit" />
</form>

Below is a version that uses exactly the HTML you posted in your question.

// Remove whitespace from beginning and end of string.
function strip(s) {
  return s.replace(/^\s+|\s+$/, '');
}

window.onload = function () {
  // Find the entry input areas and store them in an array.
  var form = document.getElementsByTagName('form')[0];
  var entries = form.getElementsByTagName('div');
  for (var i = 0; i < entries.length; ++i) {
    var entry = entries[i],
        inputs = entry.getElementsByTagName('input');
    // Make it easy to look up field values for each entry.
    ['name', 'age', 'email', 'phone'].forEach(function (field, ix) {
      entry[field] = inputs[ix];
    });
  }
  // Attach a validation function to the form submission button.
  var inputs = form.getElementsByTagName('input'),
      agreementBox = inputs[inputs.length - 2],
      submitButton = inputs[inputs.length - 1];
  submitButton.onclick = function () {
    if (!agreementBox.checked) {
      alert('Error: you must agree to our terms and conditions.');
      return;
    }
    var entryCount = 0,
        emailHash = {};
    for (var i = 0; i < entries.length; ++i) {
      var entry = entries[i],
          name = strip(entry.name.value);
      if (strip(entry.name.value) !== '') {
        var age = strip(entry.age.value),
            email = strip(entry.email.value);
        if (age === '' || email === '') {
          alert('Error: you must enter the age and email address of ' + name + '.');
          return;
        }
        if (emailHash[email] !== undefined) {
          alert('Error: ' + name + ' has the same email address as ' +
                emailHash[email] + '. Addresses must be unique.');
          return;
        }
        emailHash[email] = name;
        ++entryCount;
      }
    }
    if (entryCount == 0) {
      alert('Error: you must enter at least one name.');
      return;
    }
    alert('Success! The form has been validated.');
  };
};

form {
  font-family: sans-serif;
  font-size: 12px;
}

    <form>
        <div>
            <input type="text" id="fn1" placeholder="Full Name" />
            <input type="number" id="ag1" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em1" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn2" placeholder="Full Name" />
            <input type="number" id="ag2" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em2" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn3" placeholder="Full Name" />
            <input type="number" id="ag3" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em3" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn4" placeholder="Full Name" />
            <input type="number" id="ag4" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em4" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn5" placeholder="Full Name" />
            <input type="number" id="ag5" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em5" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn6" placeholder="Full Name" />
            <input type="number" id="ag6" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em6" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn7" placeholder="Full Name" />
            <input type="number" id="ag7" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em7" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn8" placeholder="Full Name" />
            <input type="number" id="ag8" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em8" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn9" placeholder="Full Name" />
            <input type="number" id="ag9" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em9" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>
        <div>
            <input type="text" id="fn10" placeholder="Full Name" />
            <input type="number" id="ag10" placeholder="Age" />
            <select><option value="Male">Male</option><option value="Female">Female</option></select>
            <input type="email" id="em10" placeholder="E-mail" />
            <input type="number" placeholder="Mobile" />
        </div>

        <input type="checkbox" value="Agree to our terms and agreement" />

        <input type="submit" value="submit" />
    </form>

这篇关于验证具有多个用户记录的预订表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！