使用mailcheck插件无邮箱建议输出问题求助

问题描述 #

使用mailcheck插件时无法显示邮箱建议，已确认mailcheck的JS文件可正常加载，参考相关示例实现，唯一区别是jQuery通过package.json和yarn.lock管理。

现有代码 #

HTML代码

<script src="https://unpkg.com/mailcheck@1.1.1/src/mailcheck.min.js"></script> 
<nav class="formstyle"> 
<label for="email"> e-mail 
<input id="email" name="email" placeholder="trass@gmail.com" type="text"></input> 
</label> 
<div id="suggestion"></div> 
</nav>

JavaScript代码

const domains = ['gmail.com', 'aol.com'];
const secondLevelDomains = ['hotmail'];
const topLevelDomains = ['com', 'net', 'org'];

$('#email').on('blur', function () {
  'use strict';

  $(this).mailcheck({
    domains: domains,
    secondLevelDomains: secondLevelDomains,
    topLevelDomains: topLevelDomains,
    suggested: function (element, suggestion) {
      $('#suggestion').html(`Did you mean? ${suggestion.full}`);
    },
    empty: function (element) {
      $('#suggestion').html('');
    },
  });
});

排查与修复方案 #

1. 确保jQuery加载顺序正确 #

mailcheck依赖jQuery，必须在mailcheck之前加载jQuery。由于你的jQuery通过yarn管理，需在mailcheck的script标签前引入jQuery：

<!-- 先引入本地或CDN的jQuery -->
<script src="/path/to/jquery.min.js"></script>
<!-- 再引入mailcheck -->
<script src="https://unpkg.com/mailcheck@1.1.1/src/mailcheck.min.js"></script>

若使用模块化工具（如webpack），需在JS文件顶部先导入jQuery：

import $ from 'jquery';
import 'mailcheck';

2. 修正HTML输入标签语法错误 #

<input>是自闭合标签，无需</input>，错误写法可能导致DOM解析异常：

<!-- 错误写法 -->
<input id="email" name="email" placeholder="trass@gmail.com" type="text"></input>
<!-- 正确写法 -->
<input id="email" name="email" placeholder="trass@gmail.com" type="text">

3. 验证测试用例是否触发建议逻辑 #

mailcheck仅在输入的邮箱域名与配置域名存在拼写误差时触发建议。例如输入trass@gmil.com（gmail拼错为gmil）才会显示建议，输入完全正确的trass@gmail.com则不会触发。

4. 检查控制台报错信息 #

打开浏览器开发者工具（F12）的Console面板，查看是否存在jQuery未定义、mailcheck未找到等报错，这是定位问题的核心依据。

5. 建议通过yarn安装mailcheck #

既然使用yarn管理依赖，建议直接安装mailcheck包以避免CDN加载问题：

yarn add mailcheck

之后在JS文件中导入使用即可。

内容的提问来源于stack exchange，提问作者Erlandas