繁体   English   中英

Javascript正则表达式以验证表单验证

[英]Javascript regular expression to verify form validation

所以基本上是形式验证。 在让reg ex检查fullname.value的if语句中,我无法弄清楚为什么它不将错误消息添加到数组中。 我已经在前面测试了NOT,但是似乎仍然没有进入else if语句块来添加错误消息,或者它完全跳过了它。 我添加了以下代码,也对本节中未按我认为的方式起作用的部分进行了评论。 向下查看脚本区域。

<html>
<head>
    <title>Form Validation</title>
    <style type="text/css">
        #error {color:red;}
    </style>
</head>
<body>
    <h1>Form Validation with Reg Expressions</h1>
    <div id="error">
    </div>
    <form method="post" action="https://csu.mohawkcollege.ca/tooltime/echo.php" onSubmit="return validateForm(this)">
        <div>
            <label for="fullname">Full Name:</label>
            <input id="fullname" type="text" name="fullname"/>
            Salutation of Mr. or Mrs. followed by two text strings separated by any number of spaces.
        </div>
        <div>
            <label for="street">Street:</label>
            <input id="street" type="text" name="street"/>
            2 or 3 digit number followed by a text string ending with Street or Road separated by any number of spaces.
        </div>
        <div>
            <label for="postalcode">Postal Code:</label>
            <input id="postalcode" type="text" name="postalcode"/>
            Char Char Digit optional Hyphen or space Char Digit Digit (abclxyz and number 0 not allowed. Case insensitive.)
        </div>
        <div>
            <label for="phone">Phone:</label>
            <input id="phone" type="text" name="phone"/>
            10 digits, first 3 digits have optional parentheses, either side of digits 456 are optional space, dot or hyphen.
        </div>
        <div>
            <label for="email">Email:</label>
            <input id="email" type="text" name="email"/>
            firstname.lastname@mohawkcollege.domain (firstname and lastname must be 4-10 characters in length, domain may be either .com, .ca, or .org)
        </div>
        <input type="submit"/>
    </form>
 <script type="text/javascript">
    var displayErrorMessage = document.getElementById("error");

    function validateForm(form)
    {
        displayErrorMessage.innerHTML = "";

        var errorMessages = [];

        alert("validate function entered");

        // ERROR HAPPENS HERE!!
        // DOES NOT SEEM TO GET INTO THE ELSE IF BLOCK TO ADD ERROR MESSAGE TO THE ARRAY
        if (form.fullname.value == "") errorMessages.push("Full Name cannot be empty");
        else if (!/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/.match(form.fullname.value))
        {
            errorMessages.push("Name format error. Ex. Mr. John Smith");
        }

        if (form.street.value == "") errorMessages.push("Street cannot be empty");

        if (form.postalcode.value == "") errorMessages.push("Postal Code cannot be empty");

        if (form.phone.value == "") errorMessages.push("Phone cannot be empty");

        if (form.email.value == "") errorMessages.push("Email cannot be empty");

        alert(errorMessages.length);

        if (errorMessages.length == 5)
        {
            var unorderedList = document.createElement("ul");
            var list = document.createElement("li");

            list.innerHTML = "Please fill something in. All fields are blank!";

            unorderedList.appendChild(list);

            displayErrorMessage.appendChild(unorderedList);

            return false;
        }
        else if (errorMessages.length > 0)
        {
            var unorderedList = document.createElement("ul");

            for (var n in errorMessages)
            {
                var list = document.createElement("li");
                list.innerHTML = errorMessages[n];
                unorderedList.appendChild(list);
            }

            displayErrorMessage.appendChild(unorderedList);

            return false;
        }
        else
        {
            alert("Got your info -- now the form will be submitted!");
            return true;
        }
    }
</script>
</body>

尝试使用

!form.fullname.value.match(/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/)

该方法不是string.match(regexp) 例如

'Mr. OG Haza'.match(/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/)
Output: ["Mr. OG Haza", "Mr."]

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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