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

 

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扣出來的。

但在某些內容較為簡單的頁面，使用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)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

 

數字鍵盤上的鍵的鍵碼值(keyCode)				功能鍵鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
0	96	8	104	F1	112	F7	118
1	97	9	105	F2	113	F8	119
2	98	*	106	F3	114	F9	120
3	99	+	107	F4	115	F10	121
4	100	Enter	108	F5	116	F11	122
5	101	-	109	F6	117	F12	123
6	102	.	110
7	103	/	111

 

控制鍵鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	\|	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

 

多媒體鍵碼值(keyCode)
按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼	按鍵	鍵碼
音量加	175
音量減	174
停止	179
靜音	173
瀏覽器	172
郵件	180
搜索	170
收藏	171

 

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