时间戳

首页 > 解决方案 > 使用 javascript 隐藏错误消息范围

javascript - 使用 javascript 隐藏错误消息范围

问题描述

我正在尝试通过 javasript 函数进行电子邮件验证。

function checkEmail() {
  email_address = $("#email");

  email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
  if (!email_regex.test(email_address.val())) {
    if (email_address != '') {

      $("#emailerror").html("invalid email");
      $("#emailerror").show();
    }

  } else {
    $("#emailerror").html("");
    $("#emailerror").hide();

  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="" class="form-control" id="email" onBlur="checkEmail()">
<span id="emailerror"></span>

问题是当我输入无效电子邮件时，它会显示“无效电子邮件”消息，但是当我重新输入有效电子邮件或空电子邮件时，它不会在错误范围内隐藏“无效电子邮件”消息！即使我输入了error.hide() 和error.html("")。请帮助和感谢。

标签： javascripthtml

解决方案

你为什么不使用电子邮件输入？https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email

它们与 IE 10 以来的所有浏览器兼容

<input id="emailAddress" type="email" title="Please provide a valid email address">

电子邮件模式已经在其中，您甚至可以使用属性在其上添加自己的模式pattern

如果你真的想显示一个文本，你可以这样做：

#emailAddress:invalid ~ div::before {
  content: "Your email is invalid"
}
<input id="emailAddress" type="email" title="Please provide a valid email address">
<div></div>

它也兼容自 IE 10 以来的所有浏览器

推荐阅读