javascript - 如何使用 Javascript 验证表单中的多个字段？

Question

我正在尝试验证表单中的多个字段。

首先，我没有任何 JS 经验，但经过一些研究，我将这段代码放在一起，它在很大程度上是有效的。如果所有字段都留空，则会弹出我的错误消息。如果我开始从底部向上填写表格，它们也会弹出。但是，如果正在验证的第一个字段中存在值，则提交整个表单。

对于极其冗长且困惑的代码，我深表歉意，我想有很多方法可以缩短我的代码，但就像我说的，我没有太多经验。

下面是我的 JavaScript 代码

     function validateForm() {

  var x = document.forms["myForm"]["flight_num"].value;
  var d = document.forms["myForm"]["date"].value;
  var t = document.forms["myForm"]["time"].value;
  var f = document.forms["myForm"]["friendliness"].value;
  var s = document.forms["myForm"]["storage"].value;
  var c = document.forms["myForm"]["comfort"].value;
  var cl = document.forms["myForm"]["clean"].value;
  var n = document.forms["myForm"]["noise"].value;
if (x == null || x == "") {
   document.getElementById('flighterr').innerHTML="Please enter your flight number.";

if (d == null || d == "") {
     document.getElementById('dateerr').innerHTML="Please enter the date of your flight.";

if (t == null || t == "") {
     document.getElementById('timeerr').innerHTML="Please enter the time of your flight.";

if (f == null || f == "") {
     document.getElementById('frienderr').innerHTML="Please select a choice.";

if (s == null || s == "") {
     document.getElementById('storageerr').innerHTML="Please select a choice.";

if (c == null || c == "") {
     document.getElementById('comforterr').innerHTML="Please select a choice.";

if (cl == null || cl == "") {
     document.getElementById('cleanerr').innerHTML="Please select a choice.";

if (n == null || n == "") {
     document.getElementById('noiseerr').innerHTML="Please select a choice.";
   return false; }
   return false; }
   return false; }
   return false; }
   return false; }
   return false; }
  return false;  }
    return false;}
    }

这是更新后的 JavaScript 代码

    function validateForm() {

    var validation = [{
    field: "flight_num",
    msg: "Please enter your flight number."
        },
        {
    field: "date",
    msg: "Please enter the date of your flight."
        },
        {
    field: "time",
    msg: "Please enter the time of your flight."
        },
        {
    field: "friendliness",
    msg: "Please select a choice."
        },
        {
    field: "storage",
    msg: "Please select a choice."
       },
       {
    field: "comfort",
    msg: "Please select a choice."
       },
       {
    field: "clean",
    msg: "Please select a choice."
      },
     {
    field: "noise",
    msg: "Please select a choice."
     },
     ];

   var ok = true;

    for( var i = 0; i < validation.length; ++i ) {
        if( !document.getElementById( validation[i].field ).value ) {
     document.getElementById( validation[i].field + 'err' ).innerHTML = validation[i].msg;
    ok = false;
       }
    }

    return ok;   
        }

下面是我的 html 表单

   <form name="myForm"  onsubmit="return validateForm()" id="test" method="Post"  action="input.php" >
   <table>

   <tr>
   <td>First Name: </td> <td><input type="text" name="Fname" placeholder="Optional"></td>
   </tr>

   <tr>
   <td>Last Name: </td> <td><input type="text" name="Lname" placeholder="Optional"></td>
   </tr>

   <tr>
   <td>Email: </td> <td><input id="email" type="text" name="email" placeholder="Optional" ><span id="errEmail"></span></td>
   </tr>

   <tr>
   <td>Flight# </td> <td><input id="flight_num"  type="text" name="flight_num"><Span id="star">* </span><span id="flighterr"></span></td>
   </tr>

    <tr>
    <td>Date: </td><td><input id="flight_date" type="text" name="date" placeholder="YYYY-MM-DD" ><Span id="star">* </span><span id="dateerr"></span </td>
    </tr>

     <tr>
     <td>Time: </td><td><input id="time" type="text" name="time" ><Span id="star">* </span><span id="timeerr"></span></td>
     </tr>
     </table>
     </div>

     <div id="div4">
     <table id="choices">
     <tr id="rows">
     <td id="categ" rowspan="2" width="15%"><Span id="star </span>Friendliness of Staff: </td> 
     <td width="15%"><input id="friendliness" type="radio" name="friendliness" value="No opinion"></td>
     <td width="15%"><input  id="friendliness" type="radio" name="friendliness" value="Poor" ></td>
     <td width="15%"><input  id="friendliness" type="radio" name="friendliness" value="Fair" ></td>
     <td width="15%"><input   id="friendliness" type="radio" name="friendliness" value="Good" ></td>
     <td width="10%"><input  id="friendliness" type="radio" name="friendliness" value="Excellent"></td><td width="20%"><span id="frienderr"></span></td></tr>
    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr>

    <tr id="rows">
    <td id="categ" rowspan="2"><Span id="star">* </span>Space for luggage storage: </td>
    <td><input id="storage" type="radio" name="storage" value="No opinion" ></td>
    <td><input  id="storage" type="radio" name="storage" value="Poor"></td>
    <td><input  id="storage" type="radio" name="storage" value="Fair"></td>
    <td><input  id="storage" type="radio" name="storage" value="Good"></td>
    <td><input  id="storage" type="radio" name="storage" value="Excellent"></td>
    <td><span id="storageerr"></span></td> </tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr>

    <tr id="rows">
    <td id="categ" rowspan="2"><Span id="star">* </span>Comfort of seating: </td>
    <td><input id="comfort" type="radio" name="comfort" value="No opinion"></td>
    <td ><input id="comfort" type="radio" name="comfort" value="Poor"></td>
    <td><input id="comfort" type="radio" name="comfort" value="Fair"></td>
    <td><input id="comfort" type="radio" name="comfort" value="Good"></td>
    <td><input id="comfort" type="radio" name="comfort" value=" Excellent"></td>
    <td><span id="comforterr"></span></td></tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td </tr>

    <tr id="rows">
    <td  id="categ" rowspan="2"><Span id="star">* </span>Cleanliness of aircraft: </td>
    <td><input id="clean" type="radio" name="clean" value="No opinion" ></td>
    <td><input id="clean" type="radio" name="clean" value="Poor"></td>
    <td><input id="clean" type="radio" name="clean" Value="Fair"></td>
    <td><input id="clean" type="radio" name="clean" value="Good"></td>
    <td><input id="clean" type="radio" name="clean" Value="Excellent"></td>
    <td><span id="cleanerr"></span></td></tr>

    <tr>
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td><td>Excellent</td></tr>

    <tr id="rows">
    <td  id="categ" rowspan="2"><Span id="star">* </span>Noise level of aircraft: </td>
    <td><input id="noise" type="radio" name="noise" Value="No opinion" ></td>
    <td><input id="noise" type="radio" name="noise" Value="Poor"></td>
    <td><input id="noise" type="radio" name="noise" value="fair"></td>
    <td><input id="noise" type="radio" name="noise" value="Good"></td>
    <td><input id="noise" type="radio" name="noise" value="Excellent"></td>
    <td><span id="noiseerr"></span></td></tr>

    <tr id="rows">
    <td>No Opinion</td><td>Poor</td><td>Fair</td><td>Good</td <td>Excellent</td>
    </tr></table>

    <p><Span id="star">*  Required</span></p>

    <div id="div5">
    <table id="button">
    <tr><td><input type="submit" value="Submit"></td><td><input type="reset" value="Clear Data"></td></tr>
    </table>
    </div>
    </form> 

提前致谢。

Answer 1

这是基本验证，我刚刚修改了您的 JavaScript 代码

$('#btnsub').click(function(){
console.log("DS");
  var x = document.forms["myForm"]["flight_num"].value;
  var d = document.forms["myForm"]["date"].value;
  var t = document.forms["myForm"]["time"].value;
  var f = document.forms["myForm"]["friendliness"].value;
  var s = document.forms["myForm"]["storage"].value;
  var c = document.forms["myForm"]["comfort"].value; 
  var cl = document.forms["myForm"]["clean"].value;
  var n = document.forms["myForm"]["noise"].value;
if (x == null || x == "") {
    alert("Please enter your flight number.");  return false;}

if (d == null || d == "") {
     alert("Please enter the date of your flight.");
 return false;}
if (t == null || t == "") {
     alert("Please enter the time of your flight.");
 return false;}
if (f == null || f == "") {
     alert("Please select a choice.");
 return false;}
if (s == null || s == "") {
    alert("Please select a choice.");
 return false;}
if (c == null || c == "") {
     alert("Please select a choice.");
    return false;}
if (cl == null || cl == "") {
     alert("Please select a choice.");
 return false;}
if (n == null || n == "") {
     alert("Please select a choice.");

   return false; }

    });

这是 DEMO 页面