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

Question

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

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

作为经验丰富的 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 = "";
    };
  });
});

再次引用他的评论:

If you have no idea how Wordpress works, maybe you should hire someone that can edit the plugin to make it actually work the way it should, with server side validation!