javascript - 为什么我的即时验证没有显示任何内容？

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;
}