Question

我有一个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中输入超出阈值的值时，我应该对此有所警觉。但是，它没有按预期发生。

Answer 1

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>

Answer 2

语法问题。在获取“ variationMode”变量的值之后，关闭了validateForm函数的花括号，并且如果条件结束，则在所有函数之后都关闭了花括号。尝试删除“ variationMode”变量后的右括号。

HTML使用JS进行多字段验证

2 个答案: