使用javascript验证联系表格

我的代码有问题，我真的不知道如何更正它。验证的效果很好，但问题是，当你填写名称输入字段为例如 - 迪马，然后你选择手机的字段，但名称的字段仍然没有任何，你可以看到你填写正确，你必须再次选择该字段，并且只能向该字段添加一些类。我怎样才能解决这个问题？使用javascript验证联系表格

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

来源

2016-07-31 Dima Vleskov

而是使用平变化你可以使用oninput字符，或之后的onblur控制字符进行测试时，你会失去焦点。

function setFieldValidity(element, pattern) { 
 
    var isValid = element.value === '' || element.value.search(pattern) >= 0; 
 
    if (!isValid) { 
 
    element.removeAttribute("class", "ready"); 
 
    element.style.border = "1px solid #da3637"; 
 
    document.getElementById("nameError").style.display = "block"; 
 
    document.getElementById("nameErrorTwo").style.display = "none"; 
 
    } else { 
 
    element.setAttribute("class", "ready"); 
 
    element.style.border = "1px solid #509d12"; 
 
    document.getElementById("nameError").style.display = "none"; 
 
    document.getElementById("nameErrorTwo").style.display = "block"; 
 
    } 
 
} 
 

 
window.addEventListener('DOMContentLoaded', function(e) { 
 
    //firstname 
 
    document.myform.firstname.oninput = function(e) { 
 
    setFieldValidity(this, new RegExp("\[a-z]+$", "i")); 
 
    }; 
 

 
    //phone 
 
    document.myform.phone.oninput = function(e) { 
 
    setFieldValidity(this, new RegExp("^\\d+$", "i")); 
 
    }; 
 
}, false);

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

来源

2016-07-31 17:30:47 gaetanoM

在你的原代码，当领域失去重心与非空值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>

来源

2016-07-31 16:52:18 Arnauld

阿尔诺非常感谢，现在它的工作原理它是如何应该做的:) –

高兴它帮助。除此之外：您的原始正则表达式正在测试该名称是否包含_至少一个字母_以及该电话是否包含_至少一个digit_。我不认为这是预期的行为（请参阅我编辑的解决方案）。 – Arnauld

是的，我知道我的验证不完美，谢谢你，现在它工作得很好 –

使用javascript验证联系表格

回答

相关问题