使用JavaScript进行即时表单验证

Question

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

一个例子

<!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 个解决方案

解决方案1
0 2018-12-09 21:23:56

解决方案2
0 2018-12-09 21:49:53

使用JavaScript进行即时表单验证

问题描述

2 个解决方案

解决方案1 0 2018-12-09 21:23:56

解决方案2 0 2018-12-09 21:49:53

解决方案1
0 2018-12-09 21:23:56

解决方案2
0 2018-12-09 21:49:53