javascript：表单长度验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20602441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript: form length validation
提问by Rendy Setiadi
I think, I got a validation problem on my javascript. It still submits while the form is invalid. Specifically, when user inputs more than 10 character in length, it still submits the form into database, while it should display alert. Here's the script:
我想，我的 javascript 遇到了验证问题。当表单无效时，它仍然提交。具体来说，当用户输入的长度超过 10 个字符时，它仍然将表单提交到数据库中，同时它应该显示警报。这是脚本：
<script type="text/javascript">
function validateForm()
{
var numericExpression = /^[0-9]+$/;
var a=document.forms["purchaseform"]["no"].value;
var b=document.forms["purchaseform"]["qty"].value;
if (a==null || a=="")
{
alert("Form number must be filled out");
return false;
}
if(a.match(numericExpression))
{
return true;
}
else
{
alert("Form number must be filled with numbers only");
return false;
}
if(a.length > 10) //i got a problem with this one i think
{
alert("Form number must not be greater than 10 character length");
return false;
}
if (b==null || b=="")
{
alert("Quantity must be filled out");
return false;
}
if(b.match(numericExpression))
{
return true;
}
else
{
alert("Quantity must be filled with numbers only");
return false;
}
}
</script>
And here is the form snippet:
这是表单片段：
<form name="purchaseform" method="post" onsubmit="return validateForm()" action="submitpurchaseadmin.php">
<table>
<tr>
<td>Form number</td>
<td><input type="text" name="no"></td>
</tr>
<tr>
<td>Category</td>
<td>
<select id="cat" name="cat">
</select>
</td>
</tr>
<tr>
<td>Item</td>
<td>
<select id="item" name="item">
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" name="qty"></td>
</tr>
<tr>
<td>Date</td>
<td><input type="text" name="date" value="<?php echo date("d-m-Y"); ?>"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="submit" value="Save"></td>
</tr>
</table>
</form>
回答by adeneo
Add an ID to those inputs and do
为这些输入添加一个 ID 并执行
function validateForm() {
var a = document.getElementById("no").value;
var b = document.getElementById("qty").value;
if (!a.length) {
alert("Form number must be filled out");
return false;
}else if (!a.match(/^[0-9]+$/)) {
alert("Form number must be filled with numbers only");
return false;
}else if (a.length > 10) {
alert("Form number must not be greater than 10 character length");
return false;
}else if (!b.length) {
alert("Quantity must be filled out");
return false;
}else if (!b.match(/^[0-9]+$/)) {
alert("Quantity must be filled with numbers only");
return false;
}
}
回答by msanteler
onsubmitdoesn't automatically prevent the form from submitting, you need to use preventDefaultinside your onsubmit function.
onsubmit不会自动阻止表单提交，您需要preventDefault在 onsubmit 函数中使用。
See here:
看这里：
onsubmit method doesn't stop submit
Of note – while Adeneo's fix addresses blank name and quanity, it does not seem to be alerting on the length of a.
值得注意的是——虽然 Adeneo 的修复解决了空白名称和数量，但它似乎并没有对a.
回答by Leo Zhao
Maybe the problem is here: if(a.match(numericExpression)), when user inputs more than 10 character in length, this if statement will also return true.
也许问题出在这里：if(a.match(numericExpression))当用户输入长度超过 10 个字符时，这个 if 语句也会返回 true。
