我创建了一个 JavaScript 数组，并使用搜索输入字段框来搜索该数组，如果找到则返回匹配结果，如果不匹配则返回“未找到”结果。
搜索结果工作正常，但我使用的表单验证代码不起作用。事实上，它似乎被脚本的其余部分忽略或完全无效。
当输入框留空并提交时，结果与错误匹配相同，但单引号之间没有任何值。
相反，我需要创建一个验证脚本来首先检查输入框是否为空，如果为空，则告诉用户需要一些输入。当然，如果不为空，脚本的其余部分将按描述工作。
有什么建议吗？
这是我到目前为止的代码:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Test Search Page</title>
</head>
<body>
<form method="get" action="input" onsubmit="return validate();">
<fieldset>
<input id="formInput" name="formInput" type="text" placeholder="Type Code Number Here" required/>
</fieldset>
</form>
<input id="searchBtn" type="submit" value="Submit">
</body>
</html>
脚本
var data = [{
code: "2222",
value: "$10.00"
}, {
code: "3333",
value: "$30.00"
}, {
code: "4444",
value: "$50.00"
}, {
code: "5555",
value: "$100.00"
}, {
code: "1111",
value: "$300.00"
}, {
code: "7777",
value: "$500.00"
}, {
code: "8888",
value: "$1,000.00"
}, {
code: "9999",
value: "$3,000.00"
} ];
//Script to validate an empty input box
function validate()
{
var ch = document.getElementById('formInput');
if(ch.value === '')
{
alert('You Must Enter A Code Number First.');
return false;
}
}
//Script to search array for a match
document.getElementById("searchBtn").addEventListener('click', function() {
var formInput = document.getElementById("formInput").value,
foundItem = null; //we'll store the matching value here
for (i = 0; i < data.length; i++) {
if (data[i].code == formInput) {
foundItem = data[i];
break; //we've found a match, no sense to continue
}
}
if (foundItem) {
alert("Jewellery Code # '" + foundItem.code + "' Value: " + foundItem.value);
} else {
alert("Code Number: '" + formInput + "' Was Not Found");
}
});
最佳答案
为什么不将 validate 函数移至其他点击事件中？
var data = [{
code: "2222",
value: "$10.00"
}, {
code: "3333",
value: "$30.00"
}, {
code: "4444",
value: "$50.00"
}, {
code: "5555",
value: "$100.00"
}, {
code: "1111",
value: "$300.00"
}, {
code: "7777",
value: "$500.00"
}, {
code: "8888",
value: "$1,000.00"
}, {
code: "9999",
value: "$3,000.00"
}];
//Script to search array for a match
document.getElementById("searchBtn").addEventListener('click', function() {
var formInput = document.getElementById("formInput").value,
foundItem = null; //we'll store the matching value here
if (formInput === '') {
alert('You Must Enter A Code Number First.');
return false;
}
for (i = 0; i < data.length; i++) {
if (data[i].code == formInput) {
foundItem = data[i];
break; //we've found a match, no sense to continue
}
}
if (foundItem) {
alert("Jewellery Code # '" + foundItem.code + "' Value: " + foundItem.value);
} else {
alert("Code Number: '" + formInput + "' Was Not Found");
}
});<form method="get" action="input">
<fieldset>
<input id="formInput" name="formInput" type="text" placeholder="Type Code Number Here" required/>
</fieldset>
</form>
<input id="searchBtn" type="submit" value="Submit">关于javascript - 搜索输入字段以搜索 JavaScript 数组 - 如何验证空输入框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35765514/