Question

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

public func formatContactsPhoneNumber(number: String) -> String {
    var buffer = ""
    for (i, char) in number.unicodeScalars.enumerated() {
        guard CharacterSet.decimalDigits.contains(char) else {
            continue
        }
        buffer.append(number[i])
    }
    return buffer
}

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();

  }
}

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

Answer 1

为什么不使用电子邮件输入？ 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 attribute

在其顶部添加自己的模式

如果您真的想显示文本，可以执行以下操作：

#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起也与所有浏览器兼容

Answer 2

您的代码正在运行。请参见摘要。其他一些代码可能正在干扰它。

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>

使用JavaScript隐藏错误消息范围

2 个答案: