使用 JavaScript 检查表单输入是否有效

Question

我目前正在尝试为我正在开发的一个网站创建一个登录/创建帐户页面。在创建帐户表单中，我有一个用于用户名、姓名、电子邮件、密码和验证密码的输入字段。我在输入字段中也有模式，以便用户制作有效的帐户信息。这是下面的表格：

<form  method="post" action="CreateAccount.php">
                        <h1>Create Account</h1>
                        <input class="inputInfo" type="text" name="username" id="newUsername" pattern="[A-Za-z0-9]+" placeholder="Username" maxlength="40" minlength="5" onkeyup="checkInput()" onblur="checkInput()" autocomplete="off" required/>
                        <input class="inputInfo" type="text" name="fullname" id="newName" placeholder="First and Last Name" onkeyup="checkInput()" onblur="checkInput()" minlength="3" autocomplete="off" required/>
                        <input class="inputInfo" type="email" name="email" id="newEmail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Must be a real email" placeholder="Email" onkeyup="checkInput()" onblur="checkInput()" required/>
                        <input class="inputInfo" type="password" name="password" id="newPassword" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" placeholder="Password" 
                            title="Must be 8 or more characters with at least one number or special character, uppercase letter, and lowercase letter" onkeypress="checkInput()" onblur="checkInput()" required/>
                        <input class="inputInfo" type="password" name="verifypassword" id="verifyPass" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" placeholder="Verify Password" 
                            title="Must be 8 or more characters with at least one number or special character, uppercase letter, and lowercase letter" onkeypress="checkInput()" onblur="checkInput()" required/>
                        <span><label for="showp"><input type="checkbox" id="showp" onclick="showPassword()">Show Password</label></span>
                        <button type="submit" style="margin-top: 7px;" class="disabled" id="submitButton">Sign Up</button>
                        <p style="font-size: 10px;">By signing up, you agree to our Terms , Data Policy and Cookies Policy .</p>
                    </form>

为了澄清：用户名模式要求您的用户名只能包含大小写字母和数字，并且必须至少有 5 个字符，最多 40 个字符。电子邮件要求您输入有效的电子邮件地址模式。并且密码要求密码至少有8个字符，并且必须有大小写字母和数字或特殊字符。

在输入字段中，您将看到我有一个在模糊或 keyup 事件期间调用的函数，称为 checkInput()。该函数的目的是确保输入字段具有必要的长度，然后才能启用提交按钮：

function checkInput () 
        {
            let usernameLength = document.getElementById('newUsername').value.length;
            let nameLength =  document.getElementById('newName').value.length;
            let emailLength = document.getElementById('newEmail').value.length;
            let passwordLength = document.getElementById('newPassword').value.length;
            let verifyLength = document.getElementById('verifyPass').value.length;

            if (usernameLength >= 5 && nameLength > 0 && emailLength > 0 && passwordLength >= 8 && verifyLength >= 8)
            {
                document.getElementById('submitButton').disabled = false;
                const element = document.querySelector('#submitButton');
                if (element.classList.contains('disabled'))
                {
                    element.classList.remove('disabled');
                }
            }
            else
            {
                document.getElementById('submitButton').disabled = true;
                const addElement = document.querySelector('#submitButton');
                addElement.classList.add('disabled');
            }
        }

我还有以下 CSS 类，它们可以使输入字段的边框和阴影变为绿色或红色：

.validInput {
    border-color: #50c878;
    box-shadow: 0 0 5px #50c878;
}

.invalidInput {
    border-color: #ff0000;
    box-shadow: 0 0 5px #ff0000;
}

我的问题是我想添加一些 javascript，以便当用户在表单中输入他们的信息时，代码会检查以确保他们的输入与输入字段中所述的模式相匹配。如果他们放入该字段的输入是有效的，我希望 javascript 将 validInput 类添加到输入字段。如果输入无效，我想将 invalidInput 类添加到输入字段。不过，我不知道如何让 JavaScript 检查输入是否符合模式。

我还想在每次用户发生更改事件时检查输入是否有效。

有没有人对如何去做这件事有任何想法？

Answer 1

如果您希望在用户离开该字段后运行验证，则可以将addEventListener 函数与“change”参数一起使用，或者如果您希望在用户每次写入内容时运行验证，则可以使用“input”参数文本字段。这应该为你做：

// If you want the verification to run when the user leaves the input.
document.getElementById('newUsername').addEventListener("change", checkInput);
// If you want the verification to run each time the user changes the input.
document.getElementById('newUsername').addEventListener("input", checkInput);

对于验证部分，您可以使用正则表达式。先创建验证函数，（检查输入是否有效）：

let check_username = (username)=>{
    let rx = /^[a-z0-9]{8,40}$/i; 
    return rx.test(username); // Checks if the username is only made of alphanumeric characters (case insentisive)
}

let check_password = (password)=>{
    let special_char = /[0-9!@#\$%\^\&*\)\(+=._-]/; // If you want more special characters add them inside the braces at the end (after the '=+._-')
    let upper_char = /[a-z]/;
    let lower_char = /[A-Z]/;
    return special_char.test(password) // Checks if the password contains a special character or a number
    && upper_char.test(password) // Checks if the password contains an upper case letter
    && lower_char.test(password) // Checks if the password contains a lower case letter
    && password.length>=8; // checks the password length
}

let check_email = (email)=>{
    let rx = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/;
    return rx.test(email); // Checks the mail format.
}

然后你可以这样使用它们：

check_username(document.getElementById('newUsername').value)
// This should return true if the username is valid or false if not.

希望这对您有所帮助。如果这是您要查找的内容，您可以关闭主题。