1. 程式人生 > >文字框游標離開事件:onBlur

文字框游標離開事件:onBlur

在輸入完成qq號碼、微訊號碼、email、手機號的時候,就去校驗,利用文字框的 游標離開事件:onBlur ,在這個事件裡寫校驗重複的程式,把並加入本聯絡人的id,如果重複,在文字框下面,或者後面用紅色字型提示 重複等 資訊。
而且不阻止使用者的儲存聯絡人資訊。

//首先用正則表示式判斷是否合法,然後,通過Ajax,呼叫對應的//url,即對應的action的方法,實現資料的前後臺的非同步互動。根據//返回的msg來進行判斷。
function isEmail(str){
           var reg = /^([a-zA-Z0-9_-])[email protected]([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

在輸入完成qq號碼、微訊號碼、email、手機號的時候,就去校驗,利用文字框的 游標離開事件:onBlur ,在這個事件裡寫校驗重複的程式,把並加入本聯絡人的id,如果重複,在文字框下面,或者後面用紅色字型提示 重複等 資訊。 而且不阻止使用者的儲存聯絡人資訊

【css】input文字游標垂直不居中

有人說safari不相容加這個: @media screen and (-webkit-min-device-pixel-ratio:0){ input{ line-height:50%; } } 來源:http://tinycss.blog.163.com/blog/static/2000203152

文字獲得焦點事件

input 文字框內容改變,我們可以使用onchange或者onblur來進行判斷,但是onchange是在文字內容改變,然後失去焦點的時候發生,onblur是在失去焦點時候發生,不會判斷文字內容是否

限制文字只能輸入數字Asp.net&C#

網上很多關於文字框只能輸入數字的,今天又找了一遍,發現以前的寫法居然有點問題! onkeypress="if (event.keyCode<48 || event.keyCode>57) event.returnValue=false;" 這樣寫如果使用者打

js文字禁用 獲取文字焦點onfocus 事件 註冊事件優化

一個屬性disable= true 被禁用了   disable = false 可以使用並可編輯獲取文字框的焦點  onfocus 失去焦點事件:onblur <input type="button" value="設定內容" id="btn"/> <in

IOS11 彈窗上文字游標錯位問題

最近遇到個蛋疼的問題,系統的移動端頁面在IOS升級到11以後,頁面上的彈窗中的文字框的游標會錯位,進而導致下面的按鈕也無法點選,具體解決方式就直接搬運同行的了,見下面連結https://www.cnblogs.com/zml-mary/p/7816495.html

jquery 失去焦點事件 (text文字有焦點事件

  點選滑鼠 後, 下拉框收縮 (此下拉框由上邊text文字框  和select 、增加商品分類 組成,不是純select程式碼 的下拉框) $(document).ready(function(){ $("#txtcon").blur(function(){

文字 失去焦點事件 變色

html 介面程式碼 <input    name="targeted" maxlength="5"   /> <input    name="targeted" maxlength="5"    /> <input    name="targ

js 文字鍵盤輸入事件

html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="tex

JQ外掛獲取文字(textarea)內的所選字元和游標位置索引值-selection

(function($){ $.fn.selection = function(){ var s,e,range,stored_range; if(this[0].selectionStart == undefined){ var selection=document.selection; i

js將字串作為函式名呼叫,實現input文字等form表單元素回車鍵統一事件響應

  通過給文字框<input enterKey=“fnName” />設定enterKey=“fnName”,頁面載入完後會自動繫結input的keydown事件,捕捉到回車鍵則呼叫fnName函式,如select等其它form元素也可以。要實現form表單元素回車鍵統一事件響應

Javascript仿淘寶搜尋使用者輸入事件的實現

開啟淘寶網首頁,找到淘寶首頁的搜尋框,大家可以看到,當頁面一開啟,搜尋框中就可以看到灰色字型“少女高跟鞋”,還有閃爍的游標。當用戶點選輸入的時候,灰色字消失。當用戶清空文字框的所有內容的時候,灰色字自動恢復。 接下來,這個小案例就是要介紹如何實現這種效果,即使用者輸入事件。 判斷使用者輸入的事件有 oni

CCombobox控制元件修改編輯游標顯示位置,呈現上下垂直狀態

使用MFC中系統CCombobox控制元件中CBN_DROPDWON風格時,edit編輯控制元件的高度的游標一直處於左上角位置。 效果如下圖所示: 其實,想要實現游標處於垂直狀態,如下圖所示: 這種效果看著就比較順眼了。 在此,有人想要問,怎麼改變編輯框的高度呢?

游標聚焦事件—搜尋例項

要點: 1.  .onfocus事件是游標聚集響應的事件 .onblur是焦點失去事件 2.  注意游標聚焦時,將提示內容去掉,並將字型的前景色改為黑色,和使用者輸入顏色上作區分,在改回提示內容時,將前景色改為灰色 html和內建的js程式碼: <!DOCT

textarea文字游標置於行首

1. js部分  <script language="javascript">

easyUIcombotree 選擇xxx,文字只顯示子節點,不顯示父節點

<input id="AAAxxxxxxId" name="XX" multiple style="width: 215px;"></input>     $('#AAAxxxxxxId').combotree({   &n

dev中文字等獲取焦點事件

<ClientSideEvents GotFocus="GotFocus" /> editContract.SetFocus()//設定文字框等的焦點 function GotFocus(s, e) {       &nbs

高階控制元件自動提示文字和下拉列表

高階控制元件 高階控制元件使用步驟 3.1 獲取資料 3.2 建立介面卡 陣列介面卡 ArrayAdapter 簡單介面卡 SimpleAdapter 3.3 繫結介面卡 高階控制元件與低階控制元件區別: **是否使用介面

javascript彈出瀏覽器的三種提示提示資訊、確認、輸入文字

瀏覽器的三種提示框: alert()提示資訊框 confirm()提示確認框 prompt()提示輸入文字框 1、alert()提示資訊框 效果: 實現程式碼:

文字獲取游標位置 ---- ctrl+enter換行

業務需求:按下enter鍵傳送資訊,按下ctrl+enter鍵換行 下面程式碼是網上找的資料 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm