Question

我正在创建HTML5表单，遗憾的是占位符属性在IE9中不起作用。 Modernizr帮助我解决了，但Modernizr的问题在于创建占位符属性作为输入值，这限制了我验证字段是空的。

为了解决验证，我创建了以下代码：

$(".button").click(function(){
  var reEmail = /^[A-Za-z0-9][a-zA-Z0-9._-][A-Za-z0-9]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;
  var email = $("#email");
  var name = $("#name");
  if (name.val()=="Name [Required]" && name.val()==""){
     name.val("");
     name.focus();
  } else if (email.val()=="Email [Required]" && email.val()==""){
     email.val("");
     email.focus();
  } else if (!reEmail.test(email)){
      email.val("");
      email.focus();
  } else{
      alert("Thanks!");
  }
});

但即使电子邮件是正确的，这也不起作用

注意：对不起我的英语和我的JS代码，我还在学习:)。

Answer 1

您的代码存在一些问题。

flynfish 已经确定了最重要的两个：）。

错误：

name is placeholder *OR* is empty而非name is placeholder *AND* is empty
将(!reEmail.test(email))更改为(!reEmail.test(email.val()))以检查值
您的正则表达式仅允许.，_和-作为第二个字符。你也没有逃避.所以它意味着任何角色而不仅仅是一个点。还要转义-，因为JSLint / JSHint在未转义的情况下讨厌它：）。

优化：

您不必检查电子邮件是占位符还是空字符串，因为这两个不正确的值不会通过正则表达式测试。
不要在JS代码中硬编码占位符值。您可以使用name.attr('placeholder')访问占位符值。这样，如果您更改占位符文本，则无需修改JavaScript。
我建议使用新的<input type="email">元素并将Moderznir与任何支持电子邮件输入的html5表单polyfils一起使用。这将使您的工作变得更加容易。您已经在占位符中使用moderznizr和polyfill，因此请检查它是否也不支持电子邮件输入验证。

Answer 2

我认为您的代码有一些问题：

你正在检查val是否等于“Email [Required]和空字符串......这是无效的，因为它们不能同时出现这两种情况。
在电子邮件测试中，您需要针对email.val（）而不是jquery选择器进行测试

(!reEmail.test(email))应为(!reEmail.test(email.val()))

Answer 3

如果你仍然遇到困难，我建议你使用这个小的jQuery脚本：

http://uniquemethod.com/html5-placeholder-text-with-modernizr-and-jquery-fallback

它与IE9中的MailChimp表单完美配合。

在IE9中使用Jquery和Modernizr验证HTML5表单

3 个答案: