确保用户在JavaScript表单中提交的邮政编码不能少于5个数字
Making sure that a user can't submit less than 5 numbers for zip code in a JavaScript form
我正在构建一个注册表单,我需要一种方法来防止用户提交少于5个数字的邮政编码。当我完全注释掉else if的尝试时,另一个函数(确保用户不会提交任何字母)就可以工作了。我在结束时使用返回false,以便表单不会提交,我可以测试坏的输入。抱歉缺乏jsfiddle -它不会让我提交表格的某些原因(我是一个新手,所以这可能是原因)。下面是我的代码片段:
HTML:<form name="reg" onSubmit="return formValidation();">
<p>Zip Code: <input type="text" id="zip" maxlength="5" name="zip"></p>
<input type="submit" id="submitbutton" name="submitbutton" value="Submit" />
<div id="msg"></div>
</form>
JS:
function formValidation()
{
var zip = document.reg.zip;
allnumeric(zip);
function allnumeric(zip)
{
var numbers = /^[0-9]+$/;
if(zip.value.match(numbers))
{
document.getElementById("msg").innerHTML=("OK ✓");
msg.style.color="green";
}
else if (zip.numbers < 5) /*DOES NOT COMPUTE*/
{
msg.innerHTML=("Has to be 5 numbers.");
msg.style.color="red";
}
else
{
msg.innerHTML=("Numbers only please.");
msg.style.color="red";
}
};
return false;
};
我建议接受HTML5
<form name="reg" onSubmit="return formValidation();">
<p>Zip Code:
<input type="text" id="zip" pattern="'d{5}" maxlength="5" name="zip" required="required" />
</p>
<input type="submit" id="submitbutton" name="submitbutton" value="Submit" />
<div id="msg"></div>
</form>
小提琴
您想要zip.value.length
,而不是zip.numbers
。
你也可以用正则表达式:
var numbers = /^'d{5}$/;
if(zip.value.match(numbers))
{
document.getElementById("msg").innerHTML=("OK ✓");
msg.style.color="green";
}
else
{
msg.innerHTML=("Numbers only please.");
msg.style.color="red";
}
我认为其他答案涵盖了你的JS问题的本质,但不是真正的数据质量方面,因为我不认为你真的应该以这种方式验证zip。
你当然采取了正确的方法来确保用户输入的质量——但仅仅检查5个数字可能是不够的。
有成千上万的地址,其中4或3位数的邮政编码应该被认为是有效的输入-其中zip以一个或两个0开头。一些例子包括:
- Bridgeton, NJ 08302
- Holtsville, NY 00544
- 附件,PR 00601(波多黎各所有邮政编码以00开头)
- Christiansted, VI 00821
用户经常忽略前面的00/0,这在你的表单中是应该被允许的——如果用户在知道错误的情况下得到方便的内联验证消息,告诉他们错误,他们可能会发现这是一个不愉快的干扰。
第二个可能的缺陷(同样取决于您的工作流程)是人们也可能输入zip+4。当你可能得到完整的9个时,你可能不想把它们限制在5个。
这意味着你的JS测试将不得不更新,以允许组合,但会导致一个更健壮的最终产品。至少,我建议作为表单的一部分,您包括示例邮政编码(占位符文本或类似),其中包括'00'大小写,以便用户知道期望的是什么。要允许输入可选的+4,请将正则表达式更新为:
var numbers = ^'d{5}(-'d{4})?$;
if(zip.value.match(numbers))
{
....
}
else
{
...
}
最后,确保您捕获正确的邮政编码并将其与地址正确关联的最终方法是验证整个内容(无论邮政编码的长度如何)。这些验证服务,你可以自己制作和维护或使用第三方(如我的公司- http://www.qas.com/products/on-demand-address-validation.htm)可以加快捕获一个地址,并确保它是有效的-处理3,4或5位数的zip,增强地址与缺失的+4,纠正拼写错误的zip或其他地址元素。
希望有帮助,祝你好运!
。
- 不能从angular2中的子组件指定父组件中的数组
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 转义符不能与innerHTML一起使用
- JSON.parse没有'不能使用Javascript
- JS可以在Chrome中工作,但不能在Firefox中工作
- 砌体不能填补小缺口
- javascript扫雷器floodfill算法不能正常工作
- JavaScript指令不能像我想象的那样工作
- 为什么在这个网站上不能通过JS访问元素
- Facebook登录按钮没有'不能在Firefox上工作
- WebRTC视频聊天可以在FF中使用,但不能在Chrome中使用
- 为什么jQuery 1.8不能在IE8和InternetExplorer9中使用?(截至2012年9月的IE9最新版本)
- AngularJS:$q.dedefe()不能由工厂方法共享
- 不能在同一页上进行多个jquery幻灯片切换
- 不能在图像中的地图标记中使用花式框jquery插件的区域标记
- jQuery Datepicker可以在Safari中工作,但不能在FF或Chrome中工作
- 为什么我的邮政编码验证方法不能正常工作
- Javascript regex不能正确处理邮政编码
- 确保用户在JavaScript表单中提交的邮政编码不能少于5个数字