用户输入后如何清除表单上的验证消息

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)