Question

所以基本上它是表单验证。在reg ex的if语句中检查fullname.value，我无法弄清楚它为什么不向数组添加错误消息。我已经在前面测试了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>

Answer 1

尝试使用

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

方法是string.match(regexp)，而不是相反。 e.g。

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

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

1 个答案: