表單驗證模糊

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