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

根據文檔，沒有max_length驗證，正確使用的是maxlength 。 所以像這樣：

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