<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    hyljava

    jquery校驗輸入框內容

    用Jquery控制文本框只能輸入數字和字母

      在公司開發WinForm項目時,發現公司自主研發的textbox控件非常強大,可以實現"只能輸入數字"、"只能輸入字母"和"只能輸入數字和字母"的三種輸入限制,這樣就可以精確控制用戶輸入的內容范圍,讓"用戶永遠沒有辦法輸入限定的內容范圍之外的其他內容",也就是"用戶即使想犯錯誤也沒有機會",這種限制控件輸入的方式給了我很大的啟發,如果在web項目中也能做到這樣的精確控制,那么就可以避免因為一些非法輸入而造成系統出錯,既然WinForm里面可以實現這樣的控件,那么web項目里面也應該有辦法去實現類似這樣的控件或者能夠做到類似的效果,經過自己的一番研究和查找資料,終于做到了類似的效果,針對"只能輸入數字"、"只能輸入字母"和"只能輸入數字和字母"的三種輸入限制,我封裝成onlyNum(),onlyAlpha()和onlyNumAlpha()3個Jquery擴展方法,方便復用,由于里面一些JS代碼涉及到了"禁用輸入法,獲取剪切板的內容",而"禁用輸入法,獲取剪切板的內容"只能在IE瀏覽器下才有效,對于別的瀏覽器是無效的,因此這三個方法只適合在IE瀏覽器下使用才有效,三個方法的代碼如下

    一、限制只能輸入數字

    復制代碼
     1 // ----------------------------------------------------------------------
     2 // <summary>
     3 // 限制只能輸入數字
     4 // </summary>
     5 // ----------------------------------------------------------------------
     6 $.fn.onlyNum = function () {
     7     $(this).keypress(function (event) {
     8         var eventObj = event || e;
     9         var keyCode = eventObj.keyCode || eventObj.which;
    10         if ((keyCode >= 48 && keyCode <= 57))
    11             return true;
    12         else
    13             return false;
    14     }).focus(function () {
    15     //禁用輸入法
    16         this.style.imeMode = 'disabled';
    17     }).bind("paste", function () {
    18     //獲取剪切板的內容
    19         var clipboard = window.clipboardData.getData("Text");
    20         if (/^\d+$/.test(clipboard))
    21             return true;
    22         else
    23             return false;
    24     });
    25 };
    復制代碼

    二、限制只能輸入字母

    復制代碼
     1 // ----------------------------------------------------------------------
     2 // <summary>
     3 // 限制只能輸入字母
     4 // </summary>
     5 // ----------------------------------------------------------------------
     6 $.fn.onlyAlpha = function () {
     7     $(this).keypress(function (event) {
     8         var eventObj = event || e;
     9         var keyCode = eventObj.keyCode || eventObj.which;
    10         if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))
    11             return true;
    12         else
    13             return false;
    14     }).focus(function () {
    15         this.style.imeMode = 'disabled';
    16     }).bind("paste", function () {
    17         var clipboard = window.clipboardData.getData("Text");
    18         if (/^[a-zA-Z]+$/.test(clipboard))
    19             return true;
    20         else
    21             return false;
    22     });
    23 };
    復制代碼

     三、 限制只能輸入數字和字母

    復制代碼
     1 // ----------------------------------------------------------------------
     2 // <summary>
     3 // 限制只能輸入數字和字母
     4 // </summary>
     5 // ----------------------------------------------------------------------
     6 $.fn.onlyNumAlpha = function () {
     7     $(this).keypress(function (event) {
     8         var eventObj = event || e;
     9         var keyCode = eventObj.keyCode || eventObj.which;
    10         if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))
    11             return true;
    12         else
    13             return false;
    14     }).focus(function () {
    15         this.style.imeMode = 'disabled';
    16     }).bind("paste", function () {
    17         var clipboard = window.clipboardData.getData("Text");
    18         if (/^(\d|[a-zA-Z])+$/.test(clipboard))
    19             return true;
    20         else
    21             return false;
    22     });
    23 };
    復制代碼

    使用方法:首先在畫面加載完成之后編寫如下的JS腳本

    復制代碼
    1 $(function () {
    2     // 限制使用了onlyNum類樣式的控件只能輸入數字
    3     $(".onlyNum").onlyNum();
    4     //限制使用了onlyAlpha類樣式的控件只能輸入字母
    5     $(".onlyAlpha").onlyAlpha();
    6     // 限制使用了onlyNumAlpha類樣式的控件只能輸入數字和字母
    7     $(".onlyNumAlpha").onlyNumAlpha();
    8    });
    復制代碼

    對需要做輸入控制的控件設置class樣式

    1  <ul>
    2         <li>只能輸入數字:<input type="text" class="onlyNum" /></li>
    3         <li>只能輸入字母:<input type="text" class="onlyAlpha" /></li>
    4         <li>只能輸入數字和字母:<input type="text" class="onlyNumAlpha" /></li>
    5  </ul>

    這樣畫面上凡是設置了class="onlyNum"的控件就只能輸入數字,設置了class="onlyAlpha"的控件只能輸入字母,設置了class="onlyNumAlpha"的控件只能輸入數字和字母,通過這種方式就可以限制了用戶的輸入范圍,避免用戶進行一些非法的輸入。

      在我看來,這種限制控件輸入的方式是比較好的一種方式,可以避免用戶犯錯,平時傳統的做法都是用戶輸入了非法字符后,我們再彈出一個消息框告訴用戶輸入了非法字符,這種方式就是"用戶已經做了,我們才告訴用戶不能這么做",而上面的那種方式是卻能讓用戶只能輸入我們指定范圍內的字符,讓"用戶永遠沒有機會去犯錯"。

      

      寫這篇文章既是對我自己學習的一個總結,也希望能夠對一些初學者朋友們有一定的幫助,以上文章內容如果有寫得不對的地方,歡迎廣大朋友指正,我感激不盡!,另外,如果有朋友有辦法在火狐和google下也能夠禁用輸入法和獲取剪切板的內容的,也希望能夠告知我一下,感激不盡!

    posted on 2015-05-08 11:22 何云隆 閱讀(444) 評論(0)  編輯  收藏 所屬分類: JSJsp

    主站蜘蛛池模板: 亚洲色精品三区二区一区| 卡一卡二卡三在线入口免费| 国产三级免费观看| 97在线视频免费公开观看| 牛牛在线精品观看免费正| 亚洲视频在线观看2018| 国产免费女女脚奴视频网 | 国产精品免费AV片在线观看| 亚洲成a人无码亚洲成www牛牛| 亚洲视频在线一区二区三区| 最新仑乱免费视频| 四虎1515hh永久久免费| 成年网站免费入口在线观看| 亚洲自偷自偷精品| 久久精品视频亚洲| 亚洲免费人成在线视频观看| 亚洲国产成人精品久久久国产成人一区二区三区综 | 国产在线精品观看免费观看| 亚洲av无码不卡一区二区三区| www.亚洲精品.com| 91免费国产自产地址入| 久久久久国产精品免费免费不卡| 亚洲欧洲精品成人久久曰| 亚洲国产美女视频| 久久久久亚洲AV无码专区首JN| 亚洲Av无码专区国产乱码DVD | 国产成人精品亚洲| 久久久亚洲裙底偷窥综合| 亚洲国产a∨无码中文777| 日本高清色本免费现在观看| 99爱免费观看视频在线| 无码av免费一区二区三区| 国偷自产一区二区免费视频| 最新国产乱人伦偷精品免费网站 | 中文字幕在线观看免费视频| 99精品视频免费在线观看| 久久午夜无码免费| 中文字幕视频免费| 国产免费不卡v片在线观看| 另类免费视频一区二区在线观看| 不卡视频免费在线观看|