使用jQuery email check插件开发带有email域名拼写错误校验功能的超酷动态留言版系统
日期：2012-4-26 来源：GBin1.com
在线演示 本地下载
很多的网站或者web应用都需要你填写电子邮件地址，而这个过程中，用户往往会拼写错误的电子邮件域名，今天我们将给大家介绍一款很不错的域名拼写校验插件，帮助你有效的帮助校验用户输入的电子邮件域名拼写错误，这里我们将使用这个插件强化我们以前一篇教程中的例子 - 使用jQuery插件开发一个完整验证功能的超酷动态留言版系统，如果你不了解其它相关的插件使用，请首先阅读那篇文章。
电子邮件域名拼写jQuery验证插件
这个插件要求你配置你需要验证的电子邮件域名，比如：
如果用户输入了[email protected]，那么这个插件会提示用户输入的email是否为 [email protected]。
插件下载：GitHub Repository
插件演示：demo
如何使用这个插件？
导入类库：
<script type="text/javascript" src="js/jquery.mailcheck.js"></script>
主要方法：
$('#mail').on('blur', function() {
$(this).mailcheck({
suggested: function(element, suggestion) {
/* 找到推荐的域名触发此方法 */
},
empty: function(element) {
/* 没有找到推荐的域名触发此方法 */
}
});
在以上代码中，当id=mail的元素被触发blur方法后，如果email验证插件寻找到类似用户输入的域名，则调用callback方法 suggested，否则调用empty方法。
添加电子邮件域名拼写验证功能
在今天我们开发的这个在线演示中，我们需要把以上插件和我们的validation插件整合使用，当需要提示用户域名的时候，我们使用validation插件的弹出信息框来展示”沃恩推荐的电子邮件地址“。
Javascript
$('#mail').on('blur', function() {
$(this).mailcheck({
suggested: function(element, suggestion) {
$('#suglist').validationEngine('showPrompt', 'Or it should be <b>' + suggestion.full + '</b> ?' , 'load', 'centerRight', true);
$('#suglist').html('<a id="yes" href="#">Yes</a> <a id="no" href="#">No</a>');
sugmail = suggestion.full;
},
empty: function(element) {
/* do nothing */
}
});
以上代码很简单，我们如果有推荐的域名，则调用validationEngine的showprompt方法，展示一个弹出框。然后让用户选择是否使用我们推荐的域名。如果没有找到相关推荐，则什么操作都不执行。
然后我们给弹出的yes和no按钮绑定方法，如下：
$('#yes').live('click', function(e){
$("#mail").val(sugmail);
$('#suglist').html('');
$('#commentform').validationEngine('hideAll');
e.preventDefault();
});
$('#no').live('click', function(){
$('#suglist').html('');
$('#commentform').validationEngine('hideAll');
e.preventDefault();
});
如果用户选择yes，则用我们推荐的邮件地址取代用户输入的email地址。
HTML代码
<div class="msg-wrapper"> <span id="suglist">email check</span> </div>
添加一个弹出框绑定的元素。
CSS代码和以前的代码基本保持不变。
大家可以运行在线演示查看效果。
来源：使用jQuery email check插件开发带有email域名拼写错误校验功能的超酷动态留言版系统