使用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函数；如果希望在用户每次在文本字段中写入内容时运行验证，则可以使用带有“输入”参数的addEventListener函数。这应该可以为您做到：

// 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.

希望这有帮助。如果这就是你要找的，你可以关闭主题。