Question

我希望能够在填写表单时立即验证表单，但仍在文本字段中。如果缺少/错误，它将在文本字段的右侧立即通知我。在这里，我将HTML和JavaScript密码验证与警报窗口结合在一起，但是我不知道如何使这些警报显示在文本旁边并即时显示。请提供任何建议。

An example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <form name="passForm" onsubmit="return value (this)">
        Your Password: <input type="password" name="passInput"> 
        </br>
        Confirm Password: <input type="password" name="confirmPassInput">
        </br>    
    <input type="submit" value="Submit" id="submit" onclick="return value(passForm)">
    </form>

    <script>




function value(passForm) {

    //Validating length
    if ((passForm.passInput.value).length < 8) {
            alert("Your password has less than 8 characters.");
            passForm.passInput.focus();
            return false;
        }

    //check for lower case
    if (!passForm.passInput.value.match(/[a-z]/)) {
        alert("Password must contain at least one lower case letter.");
        passForm.passInput.focus();
        return false;
    }

    //check for upper ase
    if (!passForm.passInput.value.match(/[A-Z]/)) {
        alert("Password must contain at least one upper case letter.");
        passForm.passInput.focus();
        return false;
    }

       //check for number
       if (!passForm.passInput.value.match(/\d+/g)) {
        alert("Password must contain at least one number.");
        passForm.passInput.focus();
        return false;
    }



    //Validating confirmation input
    if (passForm.confirmPassInput.value == "") {
        alert("Please confirm your password.");
        passForm.passInput.focus();
        return false;
    }

   //Validationg confirmation matches
   if (passForm.confirmPassInput.value != passForm.passInput.value) {
        alert("Your confirmation password does not match.");
        passForm.passInput.focus();
        return false;
    }

};
    </script>
</body>
</html>

Answer 1

在Bootstrap中，例如前端库，使您可以使用某些表单验证样式。您可以在Bootstrap链接上进行检查。

您可以做类似的事情。只需尝试在表单元素上使用单个name属性。当某个元素的值无效时，显示一些隐藏的元素或创建用于显示错误位置的元素，您可以添加事件侦听器以监视用户填充输入时的内容，此时，您可以动态检查每个字段。如果无效，请动态地向用户使用带有红色边框或红色的文本消息，当用户填写有效字段时，只需在该字段下方显示绿色边框或绿色文本即可。

Answer 2

我可以建议2个选项。首先尝试使用validateator.js，否则您可以添加keyup事件侦听器并在每次击键时进行验证。

使用JavaScript进行即时表单验证

2 个答案: