Javascript 为什么不是'；我的即时验证没有显示任何东西吗？

我有一个表单，上面有许多字段。当用户输入任何内容时，该字段应自动开始发送有关输入是否有效的反馈。所列出的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>

名称


电子邮件地址


密码


确认密码


地址


Zipcode

我看到了几个问题

表单上有

style=“display:none；”“

，这会使整个表单不可见

验证函数在第一次验证失败时返回false，这意味着您只会显示第一个无效字段的错误消息，例如，如果电子邮件地址和邮政编码无效，则您只会收到电子邮件地址的消息

地址验证的正则表达式已损坏

密码确认错误修复后，错误消息不会清除

根据您在使用警报时所说的有效性，我猜您所说的主要问题是由每个字段验证返回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;
}

名称


电子邮件地址


密码


确认密码


地址


Zipcode






函数插入（）{
var valid=true；
document.getElementById（“MessNM”）.innerHTML=“”；
if（！document.getElementById（“name”）.value.match（/^[A-Z]{1}[A-Z]{3,7}$/）{
document.getElementById（“MessNM”）.innerHTML=“请输入正确的名称。”；
有效=错误；
}
document.getElementById（“MessPS”）.innerHTML=“”；
如果（！document.getElementById（“password”）.value.match（/^[a-zA-Z0-9]{4,8}$/）{
document.getElementById（“MessPS”）.innerHTML=“请输入带有数字和字母的正确密码。”；
有效=错误；
}
document.getElementById（“MessPSC”）.innerHTML=“”；
if（document.getElementById（“密码检查”）.value！=document.getElementById（“密码”）.value）{
document.getElementById（“MessPSC”）.innerHTML=“密码不匹配。”；
有效=错误；
}
document.getElementById（“MessAD”）.innerHTML=“”；
如果（！document.getElementById（“address”）.value.match（/^[a-zA-Z0-9\s，'-]*$/）{
document.getElementById（“MessAD”）.innerHTML=“地址无效”；
有效=错误；
}
document.getElementById（“MessZC”）.innerHTML=“”；
if（！document.getElementById（“zipcode”）.value.match（/^[0-9]{5}$/）{
document.getElementById（“MessZC”）.innerHTML=“请输入正确的Zipcode。”；
有效=错误；
}
if（！document.getElementById（“zipcode”）.value.match（/^[0-9]{5}（-0-9]{4}）$/）{
document.getElementById（“MessZC”）.innerHTML=“请输入正确的Zipcode。”；
有效=错误；
} 
返回有效；
}