我对Javascript做的不多。
我要做的是有一个表格，用户可以输入他们的邮政编码，看看他们是否在一定数量的邮政编码（客户的服务区域）内。
如果他们的邮政编码在列表中，我想将它们发送到URL以安排约会。如果它不在列表中，我想要某种警告“抱歉，您的邮政编码不在我们的服务区域内”。
我有适应这种作品的东西，但无论他们输入什么，都会将用户发送到页面。
非常感谢任何帮助！
<form name = "myform" action="http://www.google.com/">
Enter Your Zip Code <input type = "text" name = "zip" size = "5" maxlength = "5" onchange = "checkZip()">
<button id="submit">Submit</button>
</form>
<script type = "text/javascript">
function checkZip() {
var z = document.myform.zip;
var zv = z.value;
if (!/^\d{5}$/.test(zv)) {
alert("Please enter a valid Zip Code");
document.myform.zip.value = "";
myfield = z; // note myfield must be a global variable
setTimeout('myfield.focus(); myfield.select();', 10); // to fix bug in
// Firefox
return false;
}
var codes = [ 12345, 12346, 12347, 12348, 12349, 12350 ]; // add as many
// zip codes as
// you like,
// separated by
// commas (no
// comma at the
// end)
var found = false;
for ( var i = 0; i < codes.length; i++) {
if (zv == codes[i]) {
found = true;
break;
}
}
if (!found) {
alert("Sorry, the Zip Code " + zv + " is not covered by our business");
document.myform.zip.value = "";
return false;
} else {
alert("Press okay to go forward to schedule an appointment");
}
}
</script>
答案 0 :(得分：4)
非提交按钮（简单）解决方案
<form name = "myform" action="http://www.google.com/">
Enter Your Zip Code <input type = "text" name = "zip" size = "5" maxlength = "5">
<button type="button" onclick="checkZip();" id="submit">Submit</button>
</form>
注意：一个类型为＆＃34;按钮＆＃34;的按钮是一个按钮，不提交w3c
并将checkZip()的最后一个块更改为：
if (!found) {
alert("Sorry, the Zip Code " + zv + " is not covered by our business");
document.myform.zip.value = "";
//do nothing
} else {
alert("Press okay to go forward to schedule an appointment");
document.myform.submit();
}
我所做的更改如下：
注意：这不会停止在输入元素内按Enter键提交表单的情况。你需要一个onSubmit =＆＃34;＆＃34;处理程序根据下一个处理该用例的解决方案。
提交按钮（简单）解决方案
<form name = "myform" action="http://www.google.com/" onsubmit="checkZip()">
Enter Your Zip Code <input type = "text" name = "zip" size = "5" maxlength = "5">
<button onclick="checkZip();" id="submit">Submit</button>
</form>
注意：默认情况下，没有类型的按钮是提交按钮w3c
并将checkZip()的最后一个块更改为：
if (!found) {
alert("Sorry, the Zip Code " + zv + " is not covered by our business");
return false;
} else {
alert("Press okay to go forward to schedule an appointment");
return true;
}
我所做的更改如下：
checkZip()调用移至表单checkZip()更改为返回true / false 更改解决方案
此解决方案最接近您的解决方案。然而，它增加了更多的复杂性：
表格：
<form name = "myform" action="http://www.google.com/" onsubmit="onFormSubmit();">
Enter Your Zip Code
<input type = "text" id="zipCode" name = "zip" size = "5" maxlength = "5" onchange = "onZipChange()">
<button id="submit">Submit</button>
<div id="invalidZipMsg" style="display:none;">
Sorry, but we do not service your area.
</div>
</form>
JavaScript：
/**
* Returns true if we receive a valid zip code.
* False otherwise.
*
* @param zipCode The zip code to check
* @returns True/fase if valid/invalid
*/
function isValidZip(zipCode){
var validZipCodes = {'12345':true,
'12346':true,
'12347':true,
'12348':true,
'12349':true,
'12350':true
};
//can do other checks here if you wish
if(zipCode in validZipCodes){
return true;
} else {
return false;
};
}
/**
* Run on invalid zip code.
* Disables form submission button and shows
* error message.
*/
function invalidZipCode(){
var invalidZipMsg = document.getElementById('invalidZipMsg');
invalidZipMsg.style.display = "block";
var submitButton = document.getElementById('submit');
submitButton.disabled = 'true';
}
/**
* Run on valid zip code. Enables form
* submission button and hides the error message.
* @returns
*/
function validZipCode(){
var invalidZipMsg = document.getElementById('invalidZipMsg');
invalidZipMsg.style.display = "none";
var submitButton = document.getElementById('submit');
submitButton.disabled = 'true';
}
/**
* onChange handlers for the zip code input element.
* Will validate the input value and then disable/enable
* the submit button as well as show an error message.
* @returns
*/
function onZipChange(){
var zipCode = document.getElementById('zipCode');
if(isValidZipCode(zipCode.value)){
validZipCode();
} else{
invalidZipCode();
};
}
/**
* Run on form submission. Further behavior is the same
* as @see onZipChange. Will stop form submission on invalid
* zip code.
*/
function onFormSubmit(){
var zipCode = document.getElementById('zipCode');
if(isValidZipCode(zipCode.value)){
validZipCode();
return true;
} else{
invalidZipCode();
return false;
};
}
备注
有很多方法可以解决这个问题。我只选择了两个最容易的，我认为可以提供更好的用户体验。如果您的按钮没有提交，但提供其他不需要提交表单的操作，则非提交解决方案就是一个很好的示例。在我看来，最后一个用户体验最好，但这只是一个意见。
关闭主题
如果您有时间，我建议您查看许多可用的精美JavaScript库。它们通过简单的解决方案帮助引入复杂/高级问题，这些解决方案很有意义且很可能跨浏览器兼容。我按照我的偏好顺序建议：
但请注意，他们需要时间来理解。我知道在处理不是首要任务的项目时。
开始使用jQuery和JavaScript的最快方法是：First Flight。无论如何我都没有与codeschool.com联系，也没有从中获得任何利润。这个例子是免费的，这是我的团队为刚刚开始使用jQuery的人们在工作中传递的那个。
答案 1 :(得分：1)
我假设您的问题是即使邮政编码无效，用户仍然可以提交表单。
我建议将支票移到表格提交事件中，如此
<form name = "myform" action="http://www.google.com/" onsubmit = "checkZip()">
Enter Your Zip Code <input type = "text" name = "zip" size = "5" maxlength = "5">
<button id="submit">Submit</button>
</form>
然后，当支票无法取消提交给google.com时，您可以返回false