我有一個帶有用戶名輸入欄位的表單，用于檢查該欄位是否為空并檢查用戶輸入的內容是否存在于串列中。
這一半的作業原理是在無效時出現訊息，但是如果用戶輸入串列中存在的名稱，則表單仍然提交，因為當欄位為空時表單不提交（但這是由于存在輸入所需的標簽）。
此外，如果用戶輸入的名稱存在于串列中，但使用不同的大小寫字母，則不會出現訊息“名稱已存在”，因為它與串列中名稱的大小寫不匹配。
請看我下面的代碼：
<script>
function usernameFunction() {
let x = document.getElementsByName("username")[0].value;
let listNames = ["john", "sid", "paul", "jim"];
let text;
text = "";
if (x === '' || x == null) {
text = "Username cannot be blank";
}
for (let i = 0; i < listNames.length; i ) {
if (listNames[i] === x) {
text = ('The name already exists')
}
}
document.getElementById("username_errors").innerHTML = text;
}
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementsByName("username").focus();
};
})(), true);
</script>
<form method="POST" action="">
<input type="text" name="username" placeholder="username" name class="input_fields" required>
<div class="error-message" id="username_errors"></div>
<input class="save_btn" type="submit" value="Save" name="save_username" onclick="usernameFunction()">
</form>
當名稱存在于串列中并忽略大小寫時，如何調整我的代碼以停止提交表單？- 例如 - 如果用戶輸入約翰，約翰在串列中，我希望訊息“名稱已經存在”仍然出現并且不提交。
提前致謝
uj5u.com熱心網友回復：
這將是你的線路：
if ( listNames.includes(x.toLowerCase()) ) {
return false;
}
它檢查該值John是否包含在名稱陣列中。而字串函式toLowerCase()使 morph 名稱變為小寫。
更新
function usernameFunction(e) {
e.preventDefault();
let text = '';
let x = document.getElementsByName("username")[0].value;
let listNames = ["john", "sid", "paul", "jim"];
if ( listNames.includes(x.toLowerCase()) ) {
text = x ' allready taken.';
}
if (x === '' || x == null) {
text = "Username cannot be blank";
}
if (text.length > 0) {
document.getElementById("username_errors").innerHTML = text;
return false;
}
// trigger Submit programmatically
document.getElementById("myForm").submit();
console.log('trigger submit')
}
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementsByName("username").focus();
};
})(), true);<form method="POST" id="myForm">
<input type="text" name="username" value="John" placeholder="username" name class="input_fields" required>
<div class="error-message" id="username_errors"></div>
<button class="save_btn" onclick="usernameFunction(event)">SUBMIT</button>
</form>uj5u.com熱心網友回復：
您可以toUpperCase()為此使用。
if (listNames[i].toUpperCase() === x.toUpperCase())
{
text = ('The name already exists')
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/377890.html
標籤：javascript html