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