input的blur事件

$("#input-name").blur(function () {

    var value = $(this).val();

    if (value === ‘‘) {
        return;
    }

    if (/^[\u4e00-\u9fa5]{1,3}$/.test(value)) {
        $(this).removeClass("error-class");
    } else {
        $(this).addClass("error-class");
    }

});
 

keyup事件

$(document).on(‘keyup‘, ‘.error-class‘, function (event) {
    // Avoid revalidate the field when pressing one of the following keys
    // Shift       => 16
    // Ctrl        => 17
    // Alt         => 18
    // Caps lock   => 20
    // End         => 35
    // Home        => 36
 

    // Left arrow  => 37
    // Up arrow    => 38
    // Right arrow => 39
    // Down arrow  => 40
    // Insert      => 45
    // Num lock    => 144
    // AltGr key   => 225

    //keyup事件中需要排除掉的按鍵，因為這些按鍵並不會改變input的value
    var excludedKeys = [
        16, 17, 18, 20, 35, 36, 37,
        
 
38, 39, 40, 45, 144, 225
    ];

    //event.which === 9 是鍵盤左側的Tab鍵，當input失焦且值為空時，不需要做驗證
    if (event.which === 9 && $(this).val() === "" || $.inArray(event.keyCode, excludedKeys) !== -1) {
        return;
    }

    //驗證輸入內容，驗證通過就移除報錯樣式error-class，反之則添加
   if (/^[\u4e00-\u9fa5]{1,3}$/.test($(this).val())) {
       $(this).removeClass("error-class");
   } else {
       $(this).addClass("error-class");
   }
});

keyup事件代碼是我從著名的jq表單驗證插件jquery.validate.js扣出來的，插件很好很強大，強大到被微軟內嵌到ASP.NET MVC項目中。

但在某些內容較為簡單的頁面，使用jquery.validate.js讓我覺得太累贅，我就扣出來手寫了這個驗證，發現這裏的事件綁定技巧和keyCode比較有用，特此記錄一下。

事件綁定思路

首先，對input的blur事件綁定處理方法，用正則驗證輸入；驗證通過移除報錯樣式error-class，反之則添加；

其次，使用$(document).on(‘keyup‘, ‘.error-class‘，function(){}) 為含有報錯樣式error-class的元素綁定keyup事件處理方法；

關鍵點就在於keyup事件處理方法要綁定在含有error-class的元素上，如果一開始對input綁定keyup事件處理方法，那麽用戶在敲擊第一個按鍵時就觸發了keyup事件進行正則驗證，若正則要求至少3個字符，而用戶只敲了一個字符便出現了報錯信息，用戶還沒有輸入完畢就提示錯誤這樣的交互設計是不允許的。

正確的交互是：1、用戶首次輸入時，讓其輸入完畢後（即blur事件）才做正則驗證，blur事件處理方法對用戶的完整輸入進行正則驗證，反饋錯誤信息；2、用戶根據反饋修正輸入，當錯誤內容被修改至正確時則立即（keyup事件）移除報錯樣式；3、內容沒有錯誤的input不觸發keyup事件處理方法。

雖然blur事件的處理方法也會移除報錯樣式，但沒有keyup事件處理的及時；相對blur而言，使用keyup事件可以提升頁面的友好度。

另外，這裏為什麽不用$(".error-class").keyup()綁定事件處理方法，而是用$(document).on(‘keyup‘)，不懂的同學查一下兩者的差異就明白了。

event.which、event.keyCode、event.charCode的區別

三者是之前為適應不同瀏覽器而產生的，其中event.which 將 event.keyCode 和 event.charCode 標準化了。JQuery官方推薦使用event.which：http://api.jquery.com/event.which/ 。

隨著時代變遷，目前主流、新版的瀏覽器對event.which和event.keyCode都有很好的支持。

keyCode表

keycode表出處：水木 http://www.cnblogs.com/hsapphire/archive/2009/12/16/1625642.html

記錄JavaScript中使用keyup事件做輸入驗證（附event.keyCode表）