专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > jQuery

jquery实践案例-验证电子邮箱

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
jquery实践案例--验证电子邮箱

<input type="email" name="email" id="email" value="" onpaste="return false"/>

 

我们来看看都有哪些邮箱:

 

我们如果一个个的邮箱进行判断,显然是不可能的了。

 

—个完整的Internet邮件地址由以下两个部分组成,格式如下:登录名@主机名.域名
 
中间用—个表示“在”(at)的符号“@”分开,符号的左边是对方的登录名,右边是完整的主机名,它由主机名与域名 组成。其中,域名由几部分组成,每一部分称为一个子域(Subdomain),各子域之间用圆点“.”隔开,每个子域都会告诉用户一些有关这台邮件服务器 的信息。

 

关键验证的正则表达式: var myreg = /^([.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;

 

校验输入框:

 //验证邮箱
         function vailEmail(){
             var email = jQuery("#email").val();
             var flag = false;
             var message = "";
             var myreg = /^([.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;  
             if(email ==''){
                 message = "邮箱不能为空!";
             }else if(!myreg.test(email)){
                 message = "请输入有效的邮箱地址!";
             }else if(checkEmailIsExist()){
                 message = "该邮箱地址已经被注册!";
             }else{
                 flag = true;
             }
             if(!flag){
          //错误提示 //jQuery(
"#emailDiv").removeClass().addClass("ui-form-item has-error"); // jQuery("#emailP").html(""); //jQuery("#emailP").html("<i class="icon-error ui-margin-right10">&nbsp;</i>"+message); //jQuery("#email").focus(); }else{
//正确提示 //jQuery(
"#emailDiv").removeClass().addClass("ui-form-item has-success"); //jQuery("#emailP").html(""); //jQuery("#emailP").html("<i class="icon-success ui-margin-right10">&nbsp;</i>该邮箱可用"); } return flag; }

 

写一个方法来验证一下

 

 //验证邮箱是否存在
         function checkEmailIsExist(){
             var email = jQuery("#email").val();
             var flag = false;
             jQuery.ajax(
                { url: "checkEmail?t=" + (new Date()).getTime(),
                    data:{email:email},
                    dataType:"json",
                         type:"GET",
                         async:false,
                         success:function(data) {
                          var status = data.status;
                         if(status == "1"){
                             flag = true;
                         }
                     }
            });
            return flag;
         }

 

后台处理程序:

 

@RequestMapping(value = "/checkEmail", method = RequestMethod.GET)
    public void checkEmail(HttpServletRequest request,HttpServletResponse response) {
       
        Map<String, Object> map = new HashMap<String, Object>();
        try {
            String email = request.getParameter("email");
           
            String status = "0";
            //写查询语句,查询表里面是否存在该邮箱
//UserBaseInfo userBaseInfo
= userService.findUserByEmail(email);
//if(userBaseInfo!=null)status="1"; map.put("status", status); String data = JSONObject.fromObject(map).toString(); response.getWriter().print(data); response.getWriter().flush(); response.getWriter().close(); } catch (Exception ex) { } }

 

5楼qingYun
我发现你这人怎么这么容易上火。。。,第一:我不是吐槽,我只是后台的逻辑我觉得不必要这样(因为我真没见过这么弄的,提一下自己的观点),第二:我不会用智商高不高这么幼稚的方式去攻击别人,我TM只在于别人薪水是否比我高。,第三:程序除了是工具,也是爱好!,总结一下,我不是吐槽你,也不是侮辱你,只是看到你的做法不一样,我提点意见,确认下,这是否是你们公司的要求???
4楼丶最终幻想丶
如果用户名就是邮箱地址,那前端验证邮箱唯一性是需要的,这样可以提高用户体验,因为用户不需要提交表单数据就已经知道邮箱被注册(使用),至于邮箱是不是有效的邮箱,可以通过服务器端发激活邮件来判断,这都大家都在使用的。
3楼ahdung
@qingYun,这文章估计要活生生被我跟你顶起来。,1、我没上火,也没对你有不敬的想法,我提到的智慧/智商字眼没有你想的那层意思,如果你感觉有,纯属误会,并且我道歉,2、文章的做法是前端验证格式,通过后再交后端验证该邮箱是否已在本网站注册。我觉得两步验证都有合理的应用场景,并非无意义,所以我反驳你,3、至于你说的无法对付虚假邮箱的问题,这不是这两个做法能解决的,需要额外的办法,但即便加入了发送验证邮件的方案,也不代表上面两个做法就多余了啊,所以我觉得你的观点有问题
2楼qingYun
有这样的需求么?需要验证一个邮箱的有效性???
Re: daliu_it
@qingYun,有的,因为需要进行发送邮件。确保用户的邮箱是可以用的。降低了人家填写不对的邮箱的概率。
1楼ahdung
@qingYun,大家关注的问题不同,显然你说的问题更高端更有难度,不是一个前端验证方案能解决的。而我要说的是,一个方案,不能因为它只能解决小问题不能解决大问题,就说它毫无意义,如果这点你也不认同的话,没必要继续。
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

  • jQuery搜索框输入文字下拉揭示菜单

    jQuery搜索框输入文字下拉提示菜单 jQuery搜索框输入文字下拉提示菜单 原文地址: http://www.jq22.com/jquery-info6193 ...

  • 7个替开发者准备的有用的jQuery技巧

    7个为开发者准备的有用的jQuery技巧 一、在新窗口打开链接 用下面的代码,你点击链接即可在新窗口打开: $(document).ready(fu...

  • jQuery获取呼应Input例子

    jQuery获取相应Input例子 页面上有许多input框,使用的是EasyUI样式,中间还参杂着各种其他无id的Input框,如下: <input class=...

  • webpack 引出jquery和第三方jquery插件

    webpack 引入jquery和第三方jquery插件 1、引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可。 index....

  • JQuery的开发与使用经验

    JQuery的开发与使用心得 关于jQuery的 入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和...

  • 深入学习jQuery卡通片控制

    深入学习jQuery动画控制 &times; 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话   jQuery动画可以使用fade、...

  • jquery操作table报表

    jquery操作table表格 一、数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>...

  • html + css + jquery实现简略的进度条实例

    html + css + jquery实现简单的进度条实例 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq...

  • jquery中ajax方法的datatype的功用

    jquery中ajax方法的datatype的作用 今天在维护一个项目的时候遇见了一个小问题。但是这个问题我认为对于项目十分有帮助。...

  • jQuery菜单示范(全选,反选,取消)

    jQuery菜单示例(全选,反选,取消) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl...

热门推荐: