引入jQuery mailcheck插件后报错$(...).mailcheck不是函数，求排查解决

云原生阿岚

2026-8-12

问题解决：$(...).mailcheck is not a function

核心原因：脚本加载顺序错误

mailcheck是jQuery插件，必须先加载jQuery，再加载mailcheck插件。你当前的加载顺序是先加载mailcheck，再加载jQuery，导致插件无法绑定到jQuery的原型对象上，自然调用时会提示方法不存在。

修复步骤

调整脚本加载顺序
把jQuery放在mailcheck之前引入，确保插件能找到依赖的jQuery环境：

<script src="/js/jquery-3.6.1.js"></script>
<script src="/js/mailcheck.js"></script> <!-- 插件依赖jQuery，需后加载 -->
<script src="/js/script.js" defer></script>
<script src="/js/form.js" defer></script>

检查自定义域名变量定义
你的代码中使用了domains、secondLevelDomains、topLevelDomains三个变量，但未提供定义逻辑。如果需要自定义域名列表，要在调用mailcheck前声明它们；如果不需要自定义，直接省略这三个参数即可使用插件默认值：

// 可选：自定义域名列表，省略则使用插件默认配置
const domains = ['gmail.com', 'yahoo.com', 'hotmail.com'];
const secondLevelDomains = ['mail', 'webmail'];
const topLevelDomains = ['com', 'net', 'org'];

$('#email').on('blur', function() {
  $(this).mailcheck({
    // 不需要自定义可删除以下三行
    domains: domains,                       
    secondLevelDomains: secondLevelDomains, 
    topLevelDomains: topLevelDomains,         
    suggested: function(element, suggestion) {
      $('#suggestion').html('Did you mean? ' + suggestion.full)
    },
    empty: function(element) {
      $('#suggestion').html('')
    }
  });
});