我正在尝试验证表单中的多个字段。
首先，我没有任何 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>
提前致谢。
最佳答案
这是基本验证，我刚刚修改了您的 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 页面
关于javascript - 如何使用 Javascript 验证表单中的多个字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30317240/