用戶輸入后如何清除表單上的驗證消息

Question

如果輸入的數據正確，我基本上已經制作了一個注冊表單並在每個文本字段旁邊包含了驗證消息，但我想知道一旦用戶輸入了正確的數據我該如何清除此消息，目前它仍然存在於屏幕。 我是一個初學者，所以我有一種感覺，我在做這件事的路很長，還有關於如何檢查用戶名是否存在於數據庫中的任何建議，就像我用 JavaScript 檢查驗證的方式一樣。 在所有必填字段都有效之前，提交按鈕不可用。 謝謝

<script type="text/javascript">
        function validate()
        {
            var valid = true;

            if (validateUsername() === true && validatePassword() === true &&
                    validateMobileNumber() === true && validateEmail() === true &&
                    validateCity() === true && validatePostode() === true &&
                    validateDOB() === true && validatePasswordVeri() === true)
            {
                valid = false;
            }

            if (valid)
            {
                document.getElementById('submit').disabled = !valid;
            }


        }

        function validateUsername()
        {
            if (registerform.username.value.length === null || registerform.username.value === "")
            {
                document.getElementById('uname').innerHTML = "Please enter a username";
                return false;
               }
            return true;
        }

        function validatePassword()
        {

            if (registerform.password.value.length >= 6 || registerform.password.value === "")
            {
                document.getElementById('pword').innerHTML = "Please enter a password which is 6 or more characters";
                return false;
            }
               return true;
        }


            function validatePasswordVeri()
            else if (registerform.passwordVeri.value !== registerform.password.value || register.passwordVeri.value === "")
            {
                document.getElementById('pwordv').innerHTML = "Passwords do not match";
                return false;
            }
            return true;
        }

        function validateMobileNumber()
        {
            if (registerform.mobileNumber.value.length !== 11 || registerform.mobileNumber.value === "")
            {
                document.getElementById('mobNum').innerHTML = "Please enter a correct mobile number";
                return false;
            }
            return true;
        }

        function validateEmail()
        {
            return true;
        }

        function validatecity()
        {
            if (registerform.city.value === "")
            {
                document.getElementById('userCity').innerHTML = "Please enter a city";
                return false;
            }
            return true;
        }
        function validatePostcode()
        {
            if (registerform.postCode.value === "")
            {
                document.getElementById('pCode').innerHTML = "Please enter a post code";
                return false;
            }
            return true;
        }
        function validateDOB()
        {
            if (registerform.dateOfBirth.value === "")
            {
                document.getElementById('dob').innerHTML = "Please enter a post code";
                return false;
            }
            return true;
        }



    </script>

HTML 表單

<?php
require_once("config.php");
if (!isset($_POST['submit'])) {
    ?>   <!-- The HTML registration form -->
    <form name="registerform"  method="post">
        Please fill the following form to sign up:<br /><br />

        Username*: <input type="text" name="username" onKeyup="validate()" onBlur="validateUsername();" /><span id="uname"></span><br />
        Password*: <input type="password" name="password" onKeyup="validate()" onBlur="validatePassword();"/><span id="pword"></span><br />
        Password Verify*: <input type="password" name="passwordVeri" onKeyup="validate()" onBlur="validatePassword();"/><span id="pwordv"></span><br />
        First name: <input type="text" name="firstName" /><br />
        Last name: <input type="text" name="lastName" /><br />
        Email*: <input type="email" name="emailAddress" onKeyup="validate()" onBlur="validateEmail();"/><span id="emailAdd"></span><br />
        Relationship Status*: <select name="relationshipStatus" >
            <option value="Single">Single</option>
            <option value="Taken">Taken</option>            
        </select> 
        City*: <input type="text" name="city" onKeyup="validate()" onBlur="validatecity();"/><span id="userCity"></span><br />
        Postcode*: <input type="text" name="postCode" onKeyup="validate()" onBlur="validatePostcode();"/><span id="pCode"></span><br />
        Mobile number*: <input type="tel" name="mobileNumber" onKeyup="validate()" onBlur="validateMobileNumber();"/><span id="mobNum"></span><br />
        Gender*: <select name="gender" >
            <option value="Male">Male</option>
            <option value="Female">Female</option>            
        </select>
        Date of Birth*: <input type="date" name="dateOfBirth" onKeyup="validate()" onBlur="validateDOB();"/><span id="dateOfBirth"></span>(Format: DD-MM-YYYY)<br />

        <input type="submit" id="submit" name="submit" value="Register" disabled="disabled"/>

    </form>
    <?php

Answer 1

添加 else 語句以將錯誤消息范圍的值返回到非錯誤狀態可以糾正此問題。

if (!validateUsername())
    {
        document.getElementById('uname').innerHTML = "Please enter a username";
    }else {
        document.getElementById('uname').innerHTML = "";
    }

這應該顯示您的錯誤消息並在存在有效輸入時將其返回空白。

我將通過要求您考慮在單個字段的 keyup 上驗證整個表單以及在模糊上驗證單個字段的成本/收益來擴展這個答案。 如果您將驗證代碼隔離到單獨的函數中。 那么您只能在 keyup 上驗證單個字段，並且僅在提交時驗證整個表單。

Answer 2

您可以使用element.onblur ，這意味着當我們從元素中失去焦點時調用某個函數。 例如：

someElement.onblur = function(){ 
    // Code that updates the validation message 
};

這也可以在 jQuery 中完成。 用$( 'someElement' ).blur(function() { ... });

對於檢查它是否在數據庫中的問題（我假設使用 PHP/SQL），我們可以這樣做：

 $result = mysqli_query("SELECT * FROM $tbl_usernames WHERE username='$username'");

然后我們可以檢查用戶名是否存在： if(mysqli_num_rows($result) == 1)