如何使用JavaScript驗證表單中的多個字段？
[英]How can I validate multiple fields in a form using Javascript?
問題描述
我正在嘗試驗證表單中的多個字段。
首先，我沒有使用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>
提前致謝。
3 個解決方案
解決方案1
1 2015-05-19 05:33:38
這是基本驗證，我剛剛修改了您的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; }
});
這是一個演示頁面
解決方案2
1 2015-05-20 04:15:39
嘿，我使用HTML 5做完了，只是檢查它是否還可以，然后接受答案DEMO
<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" required title="Enter first name"></td>
</tr>
<tr>
<td>Last Name: </td> <td><input type="text" name="Lname" placeholder="Optional" required title="Enter Last name"></td>
</tr>
<tr>
<td>Email: </td> <td><input id="email" type="text" name="email" placeholder="Optional" required title="Enter Email Id"><span id="errEmail" ></span></td>
</tr>
<tr>
<td>Flight# </td> <td><input id="flight_num" type="text" name="flight_num" required title="Enter Flight No."><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"required title="Enter Date" ><Span id="star">* </span><span id="dateerr"></span </td>
</tr>
<tr>
<td>Time: </td><td><input id="time" type="text" name="time" required title="Enter 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%"required><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" required><Span id="star">* </span>Space for luggage storage: </td><td>
<input id="storage" type="radio" name="storage" value="No opinion" required title="Select one choice"></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 title="Select one choice"" required></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 title="Select one choice"" required ></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 title="Select one choice"" required ></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" id="btnsub" value="Submit"></td><td><input type="reset" value="Clear Data"></td></tr>
</table>
</div>
</form>
解決方案3
-1 2015-05-19 05:28:57
只需更改邏輯validateForm（）函數：
function validateForm(){
var x = document.forms["myForm"]["flight_num"].value;
var d = document.forms["myForm"]["date"].value;
//......so on...//
var IS_VALID = true; // assume form is valid
var error_msg = '';
if (x == NULL || x == "" || x == 'undefined') {
IS_VALID = false;
error_msg += "flight num can not be blank";
}
if (d == NULL || d == "" || d == 'undefined') {
IS_VALID = false;
error_msg += "\ndate can not be blank";
}
//......do the same for all the elment
// finally check if the flag is true or false
if (IS_VALID === false) {
alert(error_msg);
}
return IS_VALID;
}
如何驗證多個不同的表單域，我找了找了一個星期
[英]How can I validate multiple different form fields, I have searched and searched for a week
當我使用JavaScript有5個字段時，如何驗證表單中的單個字段？
[英]how to validate single field in form when i have 5 fields using javascript?
如何在 onBlur 上同時使用同步和異步驗證規則來驗證表單字段？
[英]How can I can validate form fields using sync and async validation rules together on onBlur?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.