HTML使用JS進行多字段驗證
[英]Html form multiple field validation using JS
問題描述
我有一個HTML表單，其中包含4個數字字段和一個文本字段。 我已經使用JS編寫了如下的驗證代碼。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validateForm() {
discount_threshold = document.myForm.discount_threshold.value;
discountThreshold = document.myForm.discountThreshold.value;
cpThreshold = document.myForm.cpThreshold.value;
markdownCpThreshold = document.myForm.markdownCpThreshold.value;
minInventoryThreshold = document.myForm.minInventoryThreshold.value;
variationMode = document.myForm.variationMode.value;
if (discount_threshold < 0 || discount_threshold > 100){
window.alert("Please enter valid discount threshold between 0 to 100");
discount_threshold.focus();
return false;
}
if (cpThreshold < 0 || cpThreshold > 100){
window.alert("Please enter valid CP threshold between 0 to 100");
cpThreshold.focus();
return false;
}
if (markdownCpThreshold < 0 || markdownCpThreshold > 100){
window.alert("Please enter valid markdownCpThreshold threshold between 0 to 100");
markdownCpThreshold.focus();
return false;
}
if (minInventoryThreshold < 0 || minInventoryThreshold > 100){
window.alert("Please enter valid minimum Inventory Threshold between 0 to 100");
minInventoryThreshold.focus();
return false;
}
if (variationMode !== "disabled" || variationMode !== "enabled"){
window.alert("Please enter valid variation mode: disabled or enabled");
variationMode.focus();
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Discount Threshold*: <input type="number" name="discount_threshold"> <br>
CP Threshold*: <input type="number" name="cpThreshold"> <br>
Markdown Threshold*: <input type="number" name="markdownCpThreshold"> <br>
Minimum Inventory*: <input type="number" name="minInventoryThreshold"> <br>
Variation Mode*: <input type="text" name="variationMode"> <br>
<button class="btn btn-primary" style="color:white !important; height:inherit; width:inherit;" type=submit>Save Configuration</button>
</form>
</body>
<html>
我不希望用戶填寫所有字段，因此我進行了驗證。 當用戶沒有在字段1中輸入值，然后在字段3中輸入超出閾值的值時，我應該對此有所警覺。 但是，它沒有按預期發生。
2 個解決方案
解決方案1
0 2018-10-08 04:18:45
function validateForm(e) { e.preventDefault(); const discount_threshold = e.target.elements.discount_threshold.value; const cpThreshold = document.myForm.cpThreshold.value; const markdownCpThreshold = e.target.elements.markdownCpThreshold.value; const minInventoryThreshold = e.target.elements.minInventoryThreshold.value; const variationMode = e.target.elements.variationMode.value; if (discount_threshold < 0 || discount_threshold > 100) { alert("Please enter valid discount threshold between 0 to 100"); e.target.elements.discount_threshold.focus(); return false; } if (cpThreshold < 0 || cpThreshold > 100) { alert("Please enter valid CP threshold between 0 to 100"); e.target.elements.cpThreshold.focus(); return false; } if (markdownCpThreshold < 0 || markdownCpThreshold > 100) { alert("Please enter valid markdownCpThreshold threshold between 0 to 100"); e.target.elements.markdownCpThreshold.focus(); return false; } if (minInventoryThreshold < 0 || minInventoryThreshold > 100) { alert("Please enter valid minimum Inventory Threshold between 0 to 100"); e.target.elements.minInventoryThreshold.focus(); return false; } if (variationMode !== "disabled" || variationMode !== "enabled") { alert("Please enter valid variation mode: disabled or enabled"); e.target.elements.variationMode.focus(); return false; } }
<form name="myForm" action="demo_form.asp" onsubmit="validateForm(event)" method="post"> Discount Threshold*: <input type="number" name="discount_threshold"> <br> CP Threshold*: <input type="number" name="cpThreshold"> <br> Markdown Threshold*: <input type="number" name="markdownCpThreshold"> <br> Minimum Inventory*: <input type="number" name="minInventoryThreshold"> <br> Variation Mode*: <input type="text" name="variationMode"> <br> <button class="btn btn-primary" style="color:white; height:inherit; width:inherit;" type=submit>Save Configuration</button> </form>
解決方案2
0 2018-10-08 04:25:25
語法問題。 在獲取“ variationMode”變量的值之后，關閉了validateForm函數的花括號，並且如果條件結束，則在所有函數之后都關閉了花括號。 嘗試刪除“ variationMode”變量后的右括號。
使用HTML表單字段驗證
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.