文本框光标离开事件：onBlur

在输入完成qq号码、微信号码、email、手机号的时候，就去校验，利用文本框的 光标离开事件：onBlur ，在这个事件里写校验重复的程序，把并加入本联系人的id，如果重复，在文本框下面，或者后面用红色字体提示 重复等 信息。
而且不阻止用户的保存联系人信息。

//首先用正则表达式判断是否合法，然后，通过Ajax，调用对应的//url，即对应的action的方法，实现数据的前后台的异步交互。根据//返回的msg来进行判断。
function isEmail(str){ 
   
           var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
           var email=document.getElementById("contact_email").value;
           var id=document.getElementById("contact_id").value;
           var url="${ctx}/crm/contact.action?method:checkForm";
           $.ajax({
                url : url,
                async:false,
                type : "post",
                dataType : "json",
                data : {
                        id:id,
                        email:email
                    },
                success : function(data) { 
   
                    pass=data.pass;
                    msg=data.msg;
                }
          });
           if(reg.test(str)=== false){
               document.getElementById("txtHint").innerHTML="输入不合法";   
           }else if(msg!=null){
               document.getElementById("txtHint").innerHTML=""+msg;
           }else{
               document.getElementById("txtHint").innerHTML="";
           }
    }
    function isQQ(str){ 
   
           var reg=/^\d{5,10}$/;  
           var qq=document.getElementById("contact_QQ").value;
           var id=document.getElementById("contact_id").value;
           var url="${ctx}/crm/contact.action?method:checkForm";
           $.ajax({
                url : url,
                async:false,
                type : "post",
                dataType : "json",
                data : {
                        id:id,
                        QQ:qq
                    },
                success : function(data) { 
   
                    pass=data.pass;
                    msg=data.msg;
                }
          });
           if(reg.test(str)=== false){
               document.getElementById("QQHint").innerHTML="输入不合法";   
           }else if(msg!=null){
               document.getElementById("QQHint").innerHTML=""+msg;
           }else{
               document.getElementById("QQHint").innerHTML="";
           }

    }
    function isPhoneNumber(str){ 
   
        var reg=/^1[3|4|5|7|8]\d{9}$/;
        var mobile=document.getElementById("contact_mobile").value;
         var id=document.getElementById("contact_id").value;
        var url="${ctx}/crm/contact.action?method:checkForm";
           $.ajax({
                url : url,
                async:false,
                type : "post",
                dataType : "json",
                data : {
                        id:id,
                        mobile:mobile
                    },
                success : function(data) { 
   
                    pass=data.pass;
                    msg=data.msg;
                }
          });
           if(reg.test(str)=== false){
               document.getElementById("pnHint").innerHTML="输入不合法";   
           }else if(msg!=null){
               document.getElementById("pnHint").innerHTML=""+msg;
           }else{
               document.getElementById("pnHint").innerHTML="";
           }

    }

<div class="row">
                <label class="col-sm-1 control-label no-padding-right"
                    for="contact_mobile">手机:</label>
                <div class="col-sm-5">
                    <input type="text" name="contact.mobile" id="contact_mobile" value="${contact.mobile}" class="input-large" onblur="isPhoneNumber(this.value)"/>
                    <font id="pnHint" color="#FF0000"></font>               
                </div>

                <label class="col-sm-1 control-label no-padding-right"
                    for="contact_email">邮箱:</label>
                <div class="col-sm-5">
                    <input type="text" name="contact.email" id="contact_email" value="${contact.email}" class="input-large" onblur="isEmail(this.value)"/>
                    <font id="txtHint" color="#FF0000"></font>
                </div>
            </div>
            <label class="col-sm-1 control-label no-padding-right"
                    for="contact_QQ">QQ:</label>
                <div class="col-sm-3">
                    <input type="text" name="contact.QQ" id="contact_QQ" value="${contact.QQ}" class="input-large" onblur="isQQ(this.value)"/>
                    <font id="QQHint" color="#FF0000"></font>
                </div>

//对应的action的方法。
//判断String 不为空的方法，先判断不为null再判断是否equals "" : (!(QQ ==null || QQ.equals(""))

public void checkForm(){
        String mobile=(String)getParameter("mobile", String.class);
        String email=(String)getParameter("email", String.class);
        String QQ=(String)getParameter("QQ", String.class);
        Long id=(Long)getParameter("id",Long.class);
        System.out.println("id: "+id);
        boolean pass=true;
        String mobileSql="SELECT * FROM t_contact c WHERE c.f_mobile=? AND c.f_id!=?";
        List mobileList = manager.findByNativeSqlAsMap(mobileSql, new Object[]{mobile,id});

        String emailSql="SELECT * FROM t_contact c WHERE c.f_email=? AND c.f_id!=? ";       
        List emailList = manager.findByNativeSqlAsMap(emailSql, new Object[]{email,id});

        String qqSql="SELECT * FROM t_contact c WHERE c.f_qq=? AND c.f_id!=? ";
        List qqList = manager.findByNativeSqlAsMap(qqSql, new Object[]{QQ,id});
        //mobile不为空且size不为0，即有重复
        if((!(mobile ==null || mobile.equals("")))&& mobileList.size()!=0){
            pass=false;
            msg+="手机号:"+mobile+ " 重复 ";          
        }
        if((!(email ==null || email.equals(""))) && emailList.size()!=0){
            pass=false;
            msg+="email:"+email+" 重复 ";          
        }
        if((!(QQ ==null || QQ.equals(""))) && qqList.size()!=0){
            pass=false;
            msg+="qq号:"+QQ+" 重复 ";    
        }
        JSONObject resultObject = new JSONObject();
        resultObject.put("pass", pass);
        if(!(msg ==null || msg.equals(""))){
            resultObject.put("msg", msg.substring(4));
        }else{
            resultObject.put("msg", msg);
        }

        System.out.println("==========");
        System.out.println("pass"+pass);
        System.out.println(resultObject.toString());
        responseWrite(resultObject.toString());
    }

今天的文章文本框光标离开事件：onBlur分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。