Jquery 正则表达式模式未验证

Question

我正在使用 Java servlet 和 JSP 处理网页。我目前在使用 HTML 表单和使用 Jquery 使用正则表达式模式进行一些快速客户端验证时遇到问题。我正在最新版本的 Intellij Ultimate 上运行和编译。

使用正则表达式模式编写验证并在第一次对其进行测试时，它工作得非常好，并且仅在它破坏了正则表达式模式时才显示消息。但是，现在，在重新启动我的笔记本电脑后，它说我的模式被破坏了，即使我提供了有效的输入。我已经在线测试了我的正则表达式，我所有的模式都在做我想要的。

由于某种原因，它允许我在输入字段中输入一个字符并接受它，但不能超过一个字符，它会显示我的消息说模式已被破坏。

这是我编写方式的问题还是 Jquery 的错误？

编辑：再次启动我的笔记本电脑后，我现在根本没有得到任何验证，就好像它没有检测到我的 javascript 文件一样。

我将我的 javascript 写在一个不同的文件中，并在头部链接到使用 Jquery 的链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>
<script src="form_validation.js"></script>

我的表格：

<form action="CreateAccount" method="post" name = "CreateAccountForm" id = "CreateAccountForm">
    <label for="firstname">First name:</label><br>
    <input type="text" id="firstname" name="firstname"><br>

    <label for="lastname">Last name:</label><br>
    <input type="text" id="lastname" name="lastname"><br>

    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br>

    <label for="password">Password</label><br>
    <input type="password" id="password" name="password"><br>

    <label for="phone">Phone Number</label><br>
    <input type="text" id="phone" name="phone"><br>

    <label for="email">Email</label><br>
    <input type="email" id="email" name="email"><br><br>

    <input type="submit" value="Submit">

</form>

我的 Jquery：

$(function () {
    $('CreateAccountForm').validate({
        rules: {
            firstname:{
                required:true,
                pattern: /^[a-zA-Z]+$/,
                maxlength: 50

            },
            lastname:{
                required:true,
                pattern: /^[a-zA-Z]+$/,
                maxlength: 50
            },
            username:{
                required:true,
                pattern: /^[^ ]+$/,
                maxlength: 50
            },
            password:{
                required:true,
                pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,15}$/
            },
            phone:{
                required:true,
                pattern: /^\d{2}-\d{4}-\d{7}$/
            },
            email:{
                required:true,
                email:true,
                maxlength: 50
            }

        },
        messages:{
            firstname:{
                required: " A first name is required",
                pattern: " First name must only contain characters a-z",
                maxlength: "Must be less than 50 characters"


            },
            lastname:{
                required: " A last name is required",
                pattern: " Last name must only contain characters a-z",
                maxlength: "Must be less than 50 characters"
            },
            username:{
                required: " A user name is required",
                pattern: " User name cannot have spaces",
                maxlength: "Must be less than 50 characters"
            },
            password:{
                required: " A password is required",
                pattern: " Password must contain: " +
                    "At least one upper case letter, " +
                    "At least one lower case letter, " +
                    "At least one number " +
                    "and be between 8-15 characters."
            },
            phone:{
                required: " A phone number is required",
                pattern: " Phone number must be in the format **-****-*******"
            },
            email:{

                required: " An email is required",
                email: " Not a valid email address format",
                maxlength: "Must be less than 50 characters"
            }

        }

    })

})

Answer 1

根据documentation 没有max_length 验证，正确使用的是maxlength。所以是这样的：

        firstname:{
            required:true,
            pattern: /^[a-zA-Z]+$/,
            maxlength: 50
        }, // etc.