如果不是使用 Javascript 或 jquery 的电子邮件地址，则清除输入

Question

我的客户使用wordpress，他使用的模板生成动态表单，所以我不知道html存储在哪里。因此我不能在 html 中使用email 属性，也不能使用 php 验证电子邮件，因为我不知道他的主题如何验证表单。

表单生成器生成一个名为text 的输入cp_email_address 我想检查用户是否输入了有效的电子邮件，否则我想清除该字段，我没有任何其他选择，因为我不能等待用户提交再验证，不知道提交代码在哪里。我只知道电子邮件字段的名称、类别和 ID。

<script type="text/javascript">
    $('#cp_email_address').blur(function() {
    var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    if (testEmail.test(this.value)) {}; // if true pass 
    else {
        this.value="";
    };
});
</script>

• 我也试过target.value= "";
• 并尝试过$('#cp_email_address').value = "";
• 我试过document.getElementById('cp_email_address').value = "";

没有清除输入字段。

Answer 1

您应该查看 jQuery Validation 插件，因为尝试为电子邮件编写自己的正则表达式就像尝试重新发明轮子一样。您会不断发现有效但未验证的电子邮件。您修复了您的正则表达式，然后其他一些电子邮件无法验证。

jQuery Validation 为各种输入提供了验证器，电子邮件只是其中之一。该框架还易于定制，允许您根据需要动态添加自己的验证方法。

另外，不要清除输入，只需显示一条消息并要求他们在允许他们提交之前修复它。清除字段而不告诉用户为什么会让驱动用户发疯。

此外，在字段上使用keyup 或mouseout 之类的更改事件然后尝试清除字段可能会导致问题。

如果您尝试验证keyup 上的电子邮件，用户将永远无法输入电子邮件地址，因为在输入他们的第一个键后，验证器将触发并且电子邮件无法验证导致该字段被清除。没有人可以填写表格。

Mouseout 也不是一个好的解决方案。许多人，尤其是残障人士，从不使用鼠标来填写表格。相反，他们只使用TAB 键从一个字段转到另一个字段。对于这些用户，mouseout 永远不会触发，您的字段也永远不会被验证。以我的经验，blur 事件也不可靠。虽然动态验证很好，但您始终需要确保所有字段在表单提交时都有效，无论在单个字段上触发或未触发任何事件。

jQuery Validation 为我们解决了所有这些问题。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "cp_email_address" required and an email address.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
 
</head>
<body>
<form id="myform">
<label for="field">Required, email: </label>
<input class="left" id="cp_email_address" name="cp_email_address">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
jQuery( "#myform" ).validate({
  rules: {
    cp_email_address: {
      required: true,
      email: true
    }
  }
});
</script>
</body>
</html>

Answer 2

作为一名经验丰富的 WordPress 专家，我可以这么说：

• WordPress 通常不允许您将$ 用于 jQuery。尝试改用jQuery。
• 其次，你还没有把document的ready事件放进去，这更重要。

最终，我建议你做的是，将两者结合起来尝试：

(function($) {
  $(function() {
    $('#cp_email_address').blur(function() {
      var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
      if (testEmail.test(this.value)) {}; // if true pass 
      else {
        this.value = "";
      };
    });
  });
})(jQuery)

我在上面所做的是，我创建了一个 IIFE，它的第一个参数为 jQuery，因此，它与函数内部的 $ 相关联。所以这应该 90% 工作，如果你没有得到任何错误。

尝试在footer.php 或某处添加此函数，这肯定会被调用。

更新：好吧，我已经知道了，但只是想确定一下。无论如何，正如adeneo 指出的那样，也可以使用这个变体：

jQuery(function($) {
  $('#cp_email_address').blur(function() {
    var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    if (testEmail.test(this.value)) {}; // if true pass 
    else {
      this.value = "";
    };
  });
});

再次引用他的评论：

如果您不知道 Wordpress 是如何工作的，也许您应该聘请可以编辑插件的人，通过服务器端验证使其真正按照应有的方式工作！