使用jQuery email check插件开发带有email域名拼写错误校验功能的超酷动态留言版系统

日期:2012-4-26  来源:GBin1.com

使用jQuery email check插件开发带有email域名拼写错误校验的超酷动态留言版系统

在线演示  本地下载

很多的网站或者web应用都需要你填写电子邮件地址,而这个过程中,用户往往会拼写错误的电子邮件域名,今天我们将给大家介绍一款很不错的域名拼写校验插件,帮助你有效的帮助校验用户输入的电子邮件域名拼写错误,这里我们将使用这个插件强化我们以前一篇教程中的例子 - 使用jQuery插件开发一个完整验证功能的超酷动态留言版系统,如果你不了解其它相关的插件使用,请首先阅读那篇文章。

电子邮件域名拼写jQuery验证插件

这个插件要求你配置你需要验证的电子邮件域名,比如:

gbin1@gmail.com

如果用户输入了gbin1@gmail.co,那么这个插件会提示用户输入的email是否为 gbin1@gmail.com。

插件下载: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>&nbsp;&nbsp;<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域名拼写错误校验功能的超酷动态留言版系统


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值