HTML5技术

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

字号+ 作者:H5之家 来源:博客园 2015-11-17 08:25 我要评论( )

input type="email" value="" onpaste="return false"/ 我们来看看都有哪些邮箱: 我们如果一个个的邮箱进行判断,显然是不可能的了。 个完整的Internet邮件地址由以下两个部分组成,格式如下:登录名@主机名.域名 中间用个表示在(at)的符号@分开,符号的左

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

 

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

 

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

 

—个完整的Internet邮件地址由以下两个部分组成,格式如下:登录名@主机名.域名

 

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

 

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

 

校验输入框:

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(); }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; }

 

写一个方法来验证一下

 

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) { } }

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 车大棒浅谈jQuery源码(二) - 车大棒

    车大棒浅谈jQuery源码(二) - 车大棒

    2017-04-02 10:07

  • 车大棒浅谈jQuery源码(一) - 车大棒

    车大棒浅谈jQuery源码(一) - 车大棒

    2017-03-27 09:00

  • c3和js写的切割轮播图 喜欢宋仲基的妹子汉子们来,观看效果需要引入jQuery^^ - 柿子橙

    c3和js写的切割轮播图 喜欢宋仲基的妹子汉子们来,观看效果需要引入j

    2017-02-26 14:01

  • jQuery + CSS3实现环形进度条 - brightest_star

    jQuery + CSS3实现环形进度条 - brightest_star

    2017-02-09 10:01

网友点评
"