表单验证模糊

Question

我有 5 个输入字段，我希望它们在模糊时验证，并显示错误或成功消息，但通过 DOM 脚本而不是警报框。 我尝试了几种不同的代码，甚至只是一小部分代码，以查看它是否与我的 html 正确交互，但它似乎不起作用。 到目前为止，我有一个小代码来测试它是否可以运行，它应该显示一个警告框，但它没有。 我宁愿不使用任何 innerHTML 并仅使用 javascript 中的所有功能。 我的 html：

<div id=fNID>
                <label for="firstNameID">First Name: </label>
                <input id="firstNameID" type="text" name="firstNameA" value="" />
                <span> </span>
            </div>

            <div id=lNID>
                <label for="lastNameID">Last Name: </label>
                <input id="lastNameID" type="text" name="lastNameA" value="" />
                <span> </span>
            </div>

我的 javascript：


    firstNameID = document.surveyForm.getElementById("firstNameID");
    document.surveyForm.getElementById(fN).addEventListener("blur", validateName);
    function validateName() {
        var nameRegEx = /[a-zA-Z]+/;
        var firstNameID = document.getElementById("firstNameID");

        if (fN.matches(nameRegEx)) {
            alert("Success!")
        } else {
            alert("error")
        }
    }


    window.addEventListener("load", setupForm, false);
}

Answer 1

Bootstrap 有一个很好的输入验证模式。 他们在输入之后使用 div：一个用于有效输入，一个用于无效输入，使适当的输入可见：

<div class="form-group">
    <label for="uname">Username:</label>
    <input class="form-control" id="uname">
    <div class="valid-feedback">Valid.</div>
    <div class="invalid-feedback">Please fill out this field.</div>
</div>

Bootstrap 的 CSS 类根据输入的伪类:valid和:invalid修改显示。

您可以使用 setCustomValidity() 方法在 JavaScript 中设置这些伪类。

input.setCustomValidity("input is invalid")

将:invalid伪类分配给输入。

input.setCustomValidity("")

将分配:valid的伪 class。

一个工作示例：

 const input = document.getElementById('uname'); function makeValid() { input.setCustomValidity(''); } function makeInvalid() { input.setCustomValidity('a problem'); }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <h3 class="m-2">Bootstrap input with validation</h3> <form class="was-validated mx-2"> <div class="form-group"> <label for="uname">Username (required):</label> <input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname"> <div class="valid-feedback">Valid.</div> <div class="invalid-feedback">This field is invalid.</div> </div> </form> <div class="m-2"> <p>Use setCustomValidity() to change input state:</p> <button onclick="makeValid();">:valid</button> <button onclick="makeInvalid();">:invalid</button> </div>

还值得注意的是，大多数浏览器都支持在输入上显示验证消息。 这是一个不使用任何 Bootstrap 功能的示例：

 const input = document.getElementById('uname'); function makeValid() { input.setCustomValidity(''); } function makeInvalid() { input.setCustomValidity('this is invalid'); }

 body { background-color: #aaa; }.m-2 { margin: .5rem; }.mt-5 { margin-top: 1rem; }

 <body> <h3 class="m-2">Generic input with validation</h3> <form class="mt-5"> <label for="uname">Username:</label> <input type="text" id="uname" placeholder="Enter username" name="uname"> <p>Use setCustomValidity() to change input state:</p> <button onclick="makeInvalid();">input:invalid</button> </form> <div class="m-2"> <button onclick="makeValid();">input:valid</button> </div> </body>

表单验证模糊

问题描述

1 个解决方案

解决方案1
2 2020-04-15 18:35:42

表单验证模糊

问题描述

1 个解决方案

解决方案1 2 2020-04-15 18:35:42

解决方案1
2 2020-04-15 18:35:42