为什么我的瞬时验证不显示任何内容？

Question

我的表单上有很多字段。当用户输入任何内容时，该字段应自动开始发送关于输入是否有效的反馈。列出的javascript代码假设处理即时反馈，但它没有给出任何答复。如果任何用户的输入与正则表达式不匹配，也假设停止提交表单。正则表达式也不起作用，但在我使用innerHTML之前它们工作得很好。如果使用innerHTML不是强制性的，我会回去使用警报。

function insert() {

   var valid = true;

    document.getElementById("MessNM").innerHTML = "";
    if (!document.getElementById("name").value.match(/^^[A-Z]{1}[a-z]{3,7}$/)) {
        document.getElementById("MessNM").innerHTML = " Please input a proper name.";
        valid = false;
    }

    document.getElementById("MessPS").innerHTML = "";
    if (!document.getElementById("password").value.match(/^[a-zA-Z0-9]{4,8}$/)) {
        document.getElementById("MessPS").innerHTML = " Please input a proper password with numbers and letters.";
        valid = false;
    }

    document.getElementById("MessPSC").innerHTML = "";
    if (document.getElementById("passwordcheck").value != document.getElementById("password").value) {
        document.getElementById("MessPSC").innerHTML = " Password does not match.";
        valid = false;
    }

    document.getElementById("MessAD").innerHTML = "";
    if (!document.getElementById("address").value.match(/^[a-zA-Z0-9\s,'-]{5,40}$/)) {
        document.getElementById("MessAD").innerHTML = " Address is not valid";
        valid = false;
    }

    document.getElementById("MessZC").innerHTML = "";
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}$/)) {
        document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode.";
        valid = false;
    }
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}(-[0-9]{4})?$/)) {
        document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode.";
        valid = false;
    } else {
        return valid;
    }
}

function test() {

    var result = true;

    if (!insert()) {
        result = false;
    }

    return result;
}

这是javascript函数引用的html表单。

<form name="Insert" id="I2" action="order.php" method="post" style="display: none;" onsubmit="return test()">
    <p align="left">
        <div id="texter">
            <input type=text id="name" required="required" onkeyup="insert()" name="name" autocomplete="off" autofocus>Name <span id="MessNM"></span>
            <br>
            <input type=email id="email" required="required" onkeyup="insert()" name="email">Email Address <span id="MessEM"></span>
            <br>
            <input type=password id="password" required="required" onkeyup="insert()" name="password">Password <span id="MessPS"></span>
            <br>
            <input type=password id="passwordcheck" required="required" onkeyup="insert()" name="passwordcheck">Confirm Password <span id="MessPSC"></span>
            <br>
            <input type=text id="address" required="required" onkeyup="insert()" name="address">Address <span id="MessAD"></span>
            <br>
            <input type=text id="zipcode" required="required" onkeyup="insert()" name="zipcode">Zipcode <span id="MessZC"></span>
            <br>
        </div>
        <input type="submit" value="submit" onclick="test()">
        <input type="reset" value="Clear All">
        <br>
        <br>
</form>

Answer 1

我看到了几个问题。

1. 表单上有style="display: none;"，表示整个表单不可见。
2. 您的验证函数在第一次失败的验证时返回false，这意味着您只会显示第一个无效字段的错误消息，例如如果电子邮件地址和邮政编码无效，您将只收到电子邮件地址的消息。
3. 地址验证的正则表达式已损坏。
4. 修复密码确认错误后，错误消息无法清除。

事实上，当你使用警报时，你说它工作正常，我猜你所谈论的主要问题是由每个字段验证返回false的事实引起的。您可能之前只有警报，并在函数末尾返回一个布尔值。这是解决该问题的解决方案以及我上面提到的其他问题。

<form name="Insert" id="I2" action="order.php" method="post" onsubmit="return test()">
    <p align="left">
        <div id="texter">
            <input type=text id="name" required="required" onkeyup="insert()" name="name" autocomplete="off"/>Name <span id="MessNM"></span>
            <br>
            <input type="email" id="email" required="required" onkeyup="insert()" name="email">Email Address <span id="MessEM"></span>
            <br>
            <input type="password" id="password" required="required" onkeyup="insert()" name="password">Password <span id="MessPS"></span>
            <br>
            <input type="password" id="passwordcheck" required="required" onkeyup="insert()" name="passwordcheck">Confirm Password <span id="MessPSC"></span>
            <br>
            <input type="text" id="address" required="required" onkeyup="insert()" name="address">Address <span id="MessAD"></span>
            <br>
            <input type="text" id="zipcode" required="required" onkeyup="insert()" name="zipcode">Zipcode <span id="MessZC"></span>
            <br>
        </div>
        <input type="submit" value="submit" onclick="test()">
        <input type="reset" value="Clear All">
        <br>
        <br>
</form>

function insert() {
    var valid = true;

    document.getElementById("MessNM").innerHTML = "";
    if (!document.getElementById("name").value.match(/^^[A-Z]{1}[a-z]{3,7}$/)) {
        document.getElementById("MessNM").innerHTML = " Please input a proper name.";
        valid = false;
    }

    document.getElementById("MessPS").innerHTML = "";
    if (!document.getElementById("password").value.match(/^[a-zA-Z0-9]{4,8}$/)) {
        document.getElementById("MessPS").innerHTML = " Please input a proper password with numbers and letters.";
        valid = false;
    }

    document.getElementById("MessPSC").innerHTML = "";
    if (document.getElementById("passwordcheck").value != document.getElementById("password").value) {
        document.getElementById("MessPSC").innerHTML = " Password does not match.";
        valid = false;
    }

    document.getElementById("MessAD").innerHTML = "";                                                           
    if (!document.getElementById("address").value.match(/^[a-zA-Z0-9\s,'-]*$/)) {
        document.getElementById("MessAD").innerHTML = " Address is not valid";
        valid = false;
    }

    document.getElementById("MessZC").innerHTML = "";
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}$/)) {
        document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode.";
        valid = false;
    }
    if (!document.getElementById("zipcode").value.match(/^[0-9]{5}(-[0-9]{4})?$/)) {
        document.getElementById("MessZC").innerHTML = " Please input a proper Zipcode.";
        valid = false;
    } 

    return valid;
}