为什么正则表达式匹配输入但警报仍然发生？答案

【问题标题】：Why the regular expression matches input but the alert still happens?为什么正则表达式匹配输入但警报仍然发生？
【发布时间】：2020-12-08 04:24:01
【问题描述】：

我制作了一个简单的页面来验证输入。但即使我的输入与正则表达式匹配，所有三个警报仍然会发生。你能帮我弄清楚吗？谢谢

<script>
function validate() {

    var tel = document.getElementById("tel").innerHTML;
    var email = document.getElementById("email").innerHTML;
    var pcode = document.getElementById("pcode").innerHTML;
    
    var tvalid = /^(\d{3}-\d{3}-\d{3}-\d{4})$/;
    if(!tvalid.test(tel)) {
        alert("Not a valid Phone Number");
    }
    
    if (!(/@gmail\.com$/.test(email)) && !(/@hotmail\.com$/.test(email))  && !(/@outlook\.com$/.test(email)) ) {
         alert("Not a valid email");

    }

    var pvalid = /^([A-Z][A-Z]\d{2}-[a-z]\d[A-Z]\d)$/;
    if(!pvalid.test(pcode)){
         alert("Not a valid postal code.");

    }
    

}
</script>

html


    <label for="tel">Phone Number</label>
    <input type="tel" id="tel" name="tel" placeholder="Format: 001-123-456-7890" required><br>
    <input type="tel" id="tel" name="tel" placeholder="Format: 001-123-456-7890" required><br>
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email" placeholder="xxx@(gmail/hotmail/outlook).com" required><br>
    <label for="pcode">Postal Code</label>
    <input type="text" id="pcode" name="pcode" placeholder="AA11-c1V2"><br>
    <button type = "button" id="submit" onclick="validate()">Validate</button>

【问题讨论】：

标签： javascript html regex

【解决方案1】：

您的代码对所有输入都返回无效的原因是因为您实际上并没有针对输入的输入进行测试，而是一个空字符串''。

.innerHTML 将返回一个空字符串，因为在 input 标记的开头和结尾之间没有 HTML。要获取控件的值，请尝试使用 var tel = document.getElementById("tel").value; 这将返回实际的用户输入。

所以你的代码应该是这样的：

function validate() {

  var tel = document.getElementById("tel").value;
  var email = document.getElementById("email").value;
  var pcode = document.getElementById("pcode").value;

  var tvalid = /^(\d{3}-\d{3}-\d{3}-\d{4})$/;
  if (!tvalid.test(tel)) {
    alert("Not a valid Phone Number");
  }

  if (!(/@gmail\.com$/.test(email)) && !(/@hotmail\.com$/.test(email)) && !(/@outlook\.com$/.test(email))) {
    alert("Not a valid email");

  }

  var pvalid = /^([A-Z][A-Z]\d{2}-[a-z]\d[A-Z]\d)$/;
  if (!pvalid.test(pcode)) {
    alert("Not a valid postal code.");

  }


}

<label for="tel">Phone Number</label>
<input type="tel" id="tel" name="tel" placeholder="Format: 001-123-456-7890" required><br>
<input type="tel" id="tel" name="tel" placeholder="Format: 001-123-456-7890" required><br>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="xxx@(gmail/hotmail/outlook).com" required><br>
<label for="pcode">Postal Code</label>
<input type="text" id="pcode" name="pcode" placeholder="AA11-c1V2"><br>
<button type="button" id="submit" onclick="validate()">Validate</button>

【讨论】：

非常感谢您的帮助。早就应该注意到了。问题已解决。