1

解决了

Mailcheck 使用“on”方法，该方法在我使用的过时版本的 JQuery 中不可用。谢谢库菲和马丁。

我是 Javascript/Jquery 的初学者，我一直试图让它工作。

我的网站上有一个工作表单，我想在其中为流行的电子邮件域添加此客户端拼写检查。电子邮件地址的文本字段的 id 只是“电子邮件”，所以我做了这个小改动（大写 E）。

所以我的代码看起来像这样......带有一些测试语句。

<script>
document.write("test0");
document.getElementById('testspan').innerHTML = 'test3';

var domains = ['hotmail.com', 'gmail.com', 'aol.com'];
$('#Email').on('blur', function() {
  $(this).mailcheck({
    domains: domains,   // optional

    suggested: function(element, suggestion) {
      // callback code
      document.getElementById('testspan').innerHTML = 'test4';
      document.write("test1");
    },

    empty: function(element) {
      // callback code
      document.write("test2");
    }

  });
});
</script>

文本“test0test3”确实按预期出现，类似于我执行 PHP 回显时会发生的情况。

但是当焦点离开我的电子邮件文本框时，什么都没有发生。

我不知道我是否提供了足够的详细信息，以便有人确定我哪里出错了......

我真的不明白我应该在标记为“//回调代码”的地方写什么。我是否需要手动提供代码，使“您的意思是……”文本出现在他们的屏幕截图中？在此处输入图像描述

谢谢你，库菲和马丁。 我遵循了 Kufi 的代码，并且还插入了

<span id="suggestedEmail"></span>

在电子邮件文本输入元素之后。但什么也没有发生。有人可以建议我可以在回调函数中编写一个合适的测试语句，以确定是否正在执行代码路径。我有一种感觉不是。

更新 3

再次感谢 Kufi 和 Martin，

即使在制作了一个最小的 .HTML 文件进行测试之后，我也无法让它工作......我觉得现在，有人能够发现我犯的错误。这是我的整个测试文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Testing mailcheck</title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.mailcheck.js"></script>
</head>

<body>

<form id="form1" name="form1" method="post" action="contactus_mail.php">
 Name: <input name="name" type="text" id="name" size="30"  /> </br>
 Email: <input name="email" type="text" id="email" size="30" />  <span id="suggestedEmail"></span> </br>
 Subject: <input name="subject" type="text" id="subject" size="72" value="" /> </br>
 <input name="Submit" type="submit" value="Submit"/>
</form>

</br>
<span id="testspan1"></span>
</br>
<span id="testspan2"></span>
</br>

<script type="text/javascript">
$("#testspan1").html("test1");
$(function() {
var domains = ['hotmail.com', 'gmail.com', 'live.com', 'yahoo.com'];
 $("#email").on('blur', function() {
  $(this).mailcheck({
    domains: domains,   // optional
    suggested: function(element, suggestion) {
      // callback code
      $("#suggestedEmail").html("Did you mean " + suggestion.full);
    },
    empty: function(element) {
      // callback code
      document.write("empty was called");
    }
  });
 });
});
$("#testspan2").html("test2");
</script>

</body>
</html>

除了两个外部 JS 文件的可访问性之外，我还有什么需要检查的吗？jQuery版本？

解决了！

我得到：

Uncaught TypeError: Object #<Object> has no method 'on'

在看起来像这样的行：

$("#email").on('blur', function() {

当我从使用 JQuery 1.3.2 切换到当前的 1.7.2 时，这种情况就消失了。

4

2 回答 2

3

正如我所看到的，您必须编写自己的视觉反馈，如他们的文档中所述：

“您可以使用回调向用户显示适当的视觉反馈。” （底部的“使用”一章）。

所以你需要这样的东西来显示建议的电子邮件：

suggested: function(element, suggestion) {
    $("#suggestedEmail").html("Did you mean " + suggestion.full);
}

编辑：您更新的问题。这是一个工作的jsfiddle。如果发布的 javascript 代码是实际使用的代码，则需要将其包围$(function() { //your code here });

此代码应该可以工作：

$(function() {
    var domains = ['hotmail.com', 'gmail.com', 'aol.com'];
    $('#Email').on('blur', function() {
      $(this).mailcheck({
        domains: domains,   // optional

        suggested: function(element, suggestion) {
            $("#suggestedEmail").html("Did you mean " + suggestion.full);
        },
        empty: function(element) {
          document.write("test2");
        }
      });
    });
});

$(function() { ... });需要使用，以便在整个页面加载后执行里面的代码。

于 2012-04-13T13:46:52.610 回答
1

请注意，“建议”函数接受两个参数：元素和建议。您应该使用建议参数来创建输出，如屏幕截图所示。

于 2012-04-13T13:49:33.670 回答