繁体   English   中英

Javascript:通过正则表达式并使用if / else语句验证表单字段

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM