javascript - javascript表单验证不起作用，无法找到原因

Question

所以我有这个html：

<form action="insert.php" method="post" onsubmit="return validateForm(this)">
<label for="FUP start date">FUP start date:</label> 
<input type="text" name="inputField" id="inputField"/>
</br>
</br>
<label for="FUP end date">FUP end date:&nbsp;</label> 
<input type="text" name="inputField2" id="inputField2" />
</br>
</br>
<label for="Allowed traffic">Allowed traffic:</label>
<input type="text" name="Allowed_traffic" id="Allowed_traffic"/>
</br>
</br>
<label for="Frequency">Frequency:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<input type="text" name="Frequency" id="Frequency" />
</br>
</br>
<input type="submit" value="submit">
</form> 

而这个用于密码的javascript（Parola）：

<script>
function validateForm(formElement) {
  if (formElement.Allowed_traffic.length < 5) {
  alert('aaaPlease enter a password that is at least 5 characters long');
  return false;
}
if (formElement.Allowed_traffic.length > 10) {
  alert('Please enter a password that is less than 10 characters long');
  return false;
}
}

</script>

我究竟做错了什么？我想在提交时检查密码是否包含 5 到 10 个字符。谢谢！

Answer 1

替换.length为.value.length。

Answer 2

您当前正在查看元素本身的length属性<input>（可能不存在）。您要查看的是元素值的length属性，因此请执行以下操作：<input>

if (formElement.Allowed_traffic.value.length < 5) {
    alert('aaaPlease enter a password that is at least 5 characters long');
    return false;
}
else if (formElement.Allowed_traffic.value.length > 10) {
    alert('Please enter a password that is less than 10 characters long');
    return false;
}

请注意，我已将其更改为 an，if ... else if因为如果第一个条件为真，则第二个条件不成立。

Answer 3

尝试使用

 var Allowed_traffic = document.getElementById("Allowed_traffic");

代替

formElement.Allowed_traffic