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上的单个字段和整个表单。

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)

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

2 个答案: