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

12/6/2015来源:Javascript教程人气:626

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