[英]Javascript: validating form fields by regular expression and using if/else statement
在我的程序中,我創建了表單和表單中的字段。 我正在嘗試驗證字段。 為此,我使用了正則表達式,盡管我的正則表達式是正確的,但是電話的正則表達式沒有執行。 誰能告訴我我是否正確定義了if / else語句?
碼:
function validateForm() { var zip = document.myform.zip; var email = document.myform.email; var phone = document.myform.phone; if (email.value == "") { window.alert("Please enter email Address."); state.focus(); return false; } var regEx2 = /^[0-9]{5}(?:-[0-9]{4})?$/; if (zip.value.match(regEx2)) { return true; } else { window.alert("Please provide a zip in the ##### or #####-#### format."); zip.focus(); return false; } var regEx = /^(?:\\(\\d{3}\\)\\s|\\d{3}-)\\d{3}-\\d{4}$/; if (phone.value.match(regEx)) { return true; } else { window.alert("Please enter Telephone number in (xxx) xxx-xxxx format."); phone.focus(); return false; } }
<form name="myform" id="myform" action="" onsubmit="return validateForm()" method="post"> <table cellspacing="2" cellpadding="2" border="0"> <tr> <td align="right">Zip</td> <td><input type="text" name="zip" maxlength="15" size="28" /></td> </tr> <tr> <td align="right">Telephone number</td> <td><input type="text" name="phone" size="28" placeholder="(555) 555-5555" /></td> </tr> <tr> <td align="right"> EMail </td> <td> <input type="text" name="email" size="28" /></td> </tr> <tr> <td align="right"></td> <td><input type="submit" value="Submit" /> </td> </tr> </table>
問題在這里-
if (zip.value.match(regEx2)) {
return true;
} else {
window.alert("Please provide a zip in the ##### or #####-#### format.");
zip.focus();
return false;
}
無論有效的郵遞區號如何,您都將從此時返回。 之后的代碼塊將不會執行。
我建議不要在每次成功的if塊中返回,因為代碼執行將從該點返回而不驗證其他字段。
function validateForm() {
var valid = true;
var zip = document.myform.zip;
var email = document.myform.email;
var phone = document.myform.phone;
if (email.value == "")
{
window.alert("Please enter email Address.");
email.focus();
valid = false;
}
var regEx2 = \^[0-9]{5}(?:-[0-9]{4})?$\;
if(!zip.value.match(regEx2))
{
window.alert( "Please provide a zip in the ##### or #####-#### format." );
zip.focus() ;
valid = false;
}
var regEx = \^(?:\(\d{3}\)\s|\d{3}-)\d{3}-\d{4}$\;
if(!phone.value.match(regEx))
{
window.alert("Please enter Telephone number in (xxx) xxx-xxxx format.");
phone.focus();
valid = false;
}
return valid;
}
如果您真的想僅在所有前面的字段都有效時(作為您的當前代碼)驗證一個字段,則此方法有效-
function validateForm() {
var zip = document.myform.zip;
var email = document.myform.email;
var phone = document.myform.phone;
if (email.value == "")
{
window.alert("Please enter email Address.");
email.focus();
return false;
}
var regEx2 = \^[0-9]{5}(?:-[0-9]{4})?$\;
if(!zip.value.match(regEx2))
{
window.alert( "Please provide a zip in the ##### or #####-#### format." );
zip.focus() ;
return false;
}
var regEx = \^(?:\(\d{3}\)\s|\d{3}-)\d{3}-\d{4}$\;
if(!phone.value.match(regEx))
{
window.alert("Please enter Telephone number in (xxx) xxx-xxxx format.");
phone.focus();
return false;
}
return true;
}
這是完整的腳本-
<!DOCTYPE html>
<html>
<head>
<title>NumerValidation</title>
</head>
<body>
<form name="myform" id="myform" action="" onsubmit="return validateForm();" method="post">
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">Zip</td>
<td><input type="text" name="zip" maxlength="15" size="28"/></td>
</tr>
<tr>
<td align="right">Telephone number</td>
<td><input type="text" name="phone" size="28" placeholder="(555) 555-5555"/></td>
</tr>
<tr>
<td align="right"> EMail </td>
<td> <input type="text" name="email" size="28" /></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit"/> </td>
</tr>
</table>
</form>
<script>
function validateForm() {
var zip = document.myform.zip;
var email = document.myform.email;
var phone = document.myform.phone;
if (email.value == "")
{
window.alert("Please enter email Address.");
email.focus();
return false;
}
var regEx2 = /^[0-9]{5}(?:-[0-9]{4})?$/;
if(!zip.value.match(regEx2))
{
window.alert( "Please provide a zip in the ##### or #####-#### format." );
zip.focus() ;
return false;
}
var regEx = /^(?:\(\d{3}\)\s|\d{3}-)\d{3}-\d{4}$/;
if(!phone.value.match(regEx))
{
window.alert("Please enter Telephone number in (xxx) xxx-xxxx format.");
phone.focus();
return false;
}
return true;
}
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.