javascript - 使用 JavaScript 验证联系表单

Question

我的代码有问题，我真的不知道如何纠正它。验证效果很好，但问题是，当您填写姓名输入字段(例如，dima)时，您选择电话字段，但姓名字段仍然没有任何内容，您可以看到您正确填写了它，您必须再次选择该字段，然后才向该字段添加一些类。我该如何解决这个问题？

    <form name="myform>
          <input type="text" name="firstname" placeholder="First Name" maxlength="30">
          <p id="nameError">First name is required</p>
          <p id="nameErrorTwo">Enter only characters</p>
          <input type="tel" name="phone" placeholder="Phone Number">
          <p id="telError">Phone is required</p>
          <p id="telErrorTwo">Enter a number</p>                
    </form>

 // firstname
    document.myform.firstname.onblur= function() {
        var name = document.myform.firstname.value;
        if (name === "") {
            document.myform.firstname.removeAttribute("class", "ready");
            document.myform.firstname.style.border = "1px solid #da3637";
            document.getElementById("nameError").style.display = "block";
            document.getElementById("nameErrorTwo").style.display = "none";
        } else {
            //firstname onchange
            document.myform.firstname.onchange= function() {
                document.myform.firstname.style.border = "1px solid #509d12";
                document.getElementById("nameError").style.display = "none";
                document.myform.firstname.setAttribute("class", "ready");
                var pattern = new RegExp("\[a-z]+", "i");
                var isValid = this.value.search(pattern) >= 0;

                if (!(isValid)) {
                    document.myform.firstname.style.border = "1px solid #da3637";
                    document.getElementById("nameErrorTwo").style.display = "block";
                } else {
                    document.getElementById("nameErrorTwo").style.display = "none";
                    document.myform.firstname.style.border = "1px solid #509d12";
                }
            };
        }
    };

//phone
    document.myform.phone.onblur= function() {
        var name = document.myform.phone.value;
        if (name === "") {
            document.myform.phone.removeAttribute("class", "ready");
            document.myform.phone.style.border = "1px solid #da3637";
            document.getElementById("telError").style.display = "block";
            document.getElementById("telErrorTwo").style.display = "none";
        } else {
            //phone onchange
            document.myform.phone.onchange= function() {
                document.myform.phone.style.border = "1px solid #509d12";
                document.getElementById("telError").style.display = "none";
                document.myform.phone.setAttribute("class", "ready");
                var pattern = new RegExp("\\d", "i");
                var isValid = this.value.search(pattern) >= 0;

                if (!(isValid)) {
                    document.myform.phone.style.border = "1px solid #da3637";
                    document.getElementById("telErrorTwo").style.display = "block";
                } else {
                    document.getElementById("telErrorTwo").style.display = "none";
                    document.myform.phone.style.border = "1px solid #509d12";
                }
            };
        }
    };

Answer 1

在您的原始代码中，仅当字段因非空值失去焦点时才会设置 onchange() 事件监听器。这解释了您遇到的奇怪行为。

实际上，我认为没有任何理由混合使用 onblur() 和 onchange()。

请查看以下版本是否符合您的预期。它专门使用 onchange()。

// firstname
    document.myform.firstname.onchange= function() {
        var name = document.myform.firstname.value;
        if (name === "") {
            document.myform.firstname.removeAttribute("class", "ready");
            document.myform.firstname.style.border = "1px solid #da3637";
            document.getElementById("nameError").style.display = "block";
            document.getElementById("nameErrorTwo").style.display = "none";
        } else {
            document.getElementById("nameError").style.display = "none";
            document.myform.firstname.setAttribute("class", "ready");
            var pattern = new RegExp("^[a-z]+$", "i");
            var isValid = this.value.search(pattern) >= 0;

            if (!(isValid)) {
                document.myform.firstname.style.border = "1px solid #da3637";
                document.getElementById("nameErrorTwo").style.display = "block";
            } else {
                document.getElementById("nameErrorTwo").style.display = "none";
                document.myform.firstname.style.border = "1px solid #509d12";
            }
        }
    };

//phone
    document.myform.phone.onchange= function() {
        var name = document.myform.phone.value;
        if (name === "") {
            document.myform.phone.removeAttribute("class", "ready");
            document.myform.phone.style.border = "1px solid #da3637";
            document.getElementById("telError").style.display = "block";
            document.getElementById("telErrorTwo").style.display = "none";
        } else {
            //phone onchange
            document.getElementById("telError").style.display = "none";
            document.myform.phone.setAttribute("class", "ready");
            var pattern = new RegExp("^\\d+$");
            var isValid = this.value.search(pattern) >= 0;

            if (!(isValid)) {
                document.myform.phone.style.border = "1px solid #da3637";
                document.getElementById("telErrorTwo").style.display = "block";
            } else {
                document.getElementById("telErrorTwo").style.display = "none";
                document.myform.phone.style.border = "1px solid #509d12";
            }
        }
    };

<form name="myform">
  <div>
    <input type="text" name="firstname" placeholder="First Name" maxlength="30">
    <p id="nameError">First name is required</p>
    <p id="nameErrorTwo">Enter only characters</p>
  </div>
  <div>
    <input type="tel" name="phone" placeholder="Phone Number">
    <p id="telError">Phone is required</p>
    <p id="telErrorTwo">Enter a number</p>
  </div>
</form>