使用數組和用戶輸入進行表單驗證

我已經設置了一個用戶輸入框來輸入一個數字（1到3）來顯示我的網站上的許多常見問題解答。我還想使用表單驗證來通知用戶他們已將輸入框留空。該數組用戶輸入打印得很好，但當輸入框留空時，表單驗證不會發出警報。使用數組和用戶輸入進行表單驗證

下面是HTML：

<div id="block3"><br/><br/> 
     <a name="FAQs"><img id="img2" src="pic2.JPG" alt="Computer" /> 
     <h2>FAQs</h2></a> 
      <p id="p01"> 
      Enter a number (up to 3): 
      <input type="text" id="FAQS_list" placeholder="Enter Number Here" />, and 
      <button value="Click" onclick="listFAQS()" onSubmit="return validateForm()">Click</button> to see that many Frequently Asked Questions.<br/><br/><br/></p> 
     <p id="FAQS"></p> 
     <script src="expExternal.js" type="text/javascript"></script>

這裏是JavaScript

 function listFAQS() {var arrayFAQ = ["FAQ1", "FAQ2", "FAQ3"]; 

var n = document.getElementById('FAQS_list').value; 
var x = 0; 
    var text = ""; 
    while (x < n) { 
text += arrayFAQ[x] + "<br>"; 
x++;} 
document.getElementById('FAQS').innerHTML = text; 
} 
// Form Validation 
function validateForm() { 
var y = document.getElementById("FAQS_list").value; 
if (y == "") { 
    alert("Please enter a number."); 
    return false; 
} 
}

任何幫助將不勝感激！

來源

2017-05-07 Jordan Jackson

首先，您必須在while循環語句之前或while循環語句中控制arrayFAQ的大小，否則您的列表將包含額外的n-3數字undefined。

while (n <= arrayFAQ.length && x < n) { 
     text += arrayFAQ[x] + "<br>"; 
     x++; 
    }

如果你想添加新元素到數組arrayFAQ，並顯示它們，添加一個if塊之後

var n = document.getElementById('FAQS_list').value;

這樣

if (isNaN(n)) { 
    arrayFAQ.push(n); 
    n = arrayFAQ.length; 
}

來源

2017-05-07 18:55:01 dvirovec

接縫。如果（！validateForm（））返回，那麼只需添加爲函數列表的第一行即可：（） – dvirovec

您需要使用表單標籤和onsubmit事件處理程序。
修改按鈕的類型爲submit。請參閱下面的代碼以供參考：你改變了你的問題

function listFAQS() { 
 
    var arrayFAQ = ["FAQ1", "FAQ2", "FAQ3"]; 
 

 
    var n = document.getElementById('FAQS_list').value; 
 
    var x = 0; 
 
    var text = ""; 
 
    while (x < n) { 
 
    text += arrayFAQ[x] + "<br>"; 
 
    x++; 
 
    } 
 
    document.getElementById('FAQS').innerHTML = text; 
 

 
} 
 
// Form Validation 
 
function validateForm() { 
 
    var y = document.getElementById("FAQS_list").value; 
 
    if (y == "") { 
 
    alert("Please enter a number."); 
 
    return false; 
 
    } 
 
}

<form onsubmit="return validateForm()" action="/" method="post"> 
 
    <a name="FAQs"> 
 
    <img id="img2" src="pic2.JPG" alt="Computer" /> 
 
    <h2>FAQs</h2> 
 
    </a> 
 
    <p id="p01"> 
 
    Enter a number (up to 3): 
 
    <input type="text" id="FAQS_list" placeholder="Enter Number Here" />, and 
 
    <button type="submit" value="Click" onclick="listFAQS()">Click</button> to see that many Frequently Asked Questions.<br /><br /><br /> 
 
    </p> 
 
    <p id="FAQS"></p> 
 
</form>

來源

2017-05-07 19:20:40

使用數組和用戶輸入進行表單驗證

回答

相關問題