最近在修改一個MVC項目的頁面時要實作輸入為空時禁用送出按扭的功能，這其實是個很簡單的功能，這裡隻是寫點自己的分享出來，順便總結經驗以後查用。資深專家勿噴 。
<a href="#a">輸入為空禁用送出按扭</a>
<a href="#b">錯誤提示---增加使用者友好度</a>
<a href="#c">Ctrl+Enter組合鍵—錦上添花</a>
<a href="#d">給送出按扭變個樣</a>
<a href="#e">隻接受特定類型的輸入</a>
在制作表單時，我們經常會遇到需要對表單内容進行驗證，資料非法時不允許使用者送出。對使用者的輸入進行驗證又有兩種選擇：伺服器端的驗證和用戶端的驗證。由于後者會重大伺服器的負擔，不利于伺服器處理更為核心的業務，一般我們都選擇用JavaScript在用戶端進行驗證。這樣會保證資料在送達伺服器時已經是正确的，減輕了伺服器開銷，更重要的是，用戶端的驗證是即時的，不會存在與伺服器進行通信的時間開銷。
如果你在開發中使用的是第三方控件，你可能不必考慮驗證了，控件大都自帶了資料驗證功能，你隻需調用相關功能即可。但很多時候其實還是需要我們親自動手進行驗證的。
當輸入框中沒有值時，無聊的使用者還是會猛擊送出按扭的，這時需要将送出禁用掉。即使是這樣一個灰常之簡單的功能，在初次嘗試時也不是一下就達到了我想要的效果的，尋求理想的解決方案是個過程。這裡我将用jQuery來實作。
首先構造一個非常簡單的頁面，隻是用來示範，上面放一個輸入框，一個送出按扭。
下面打開VS2010建立一個網站項目（當然，本文中的一切操作你完全可以在記事本中完成，我隻是想用VS的代碼提示及排版友善些）
圖1
然後右擊項目名選擇添加新項，往項目中添加一個HTML 頁面。
往上面放面放一個輸入框和一個送出按扭。<body>部分代碼如下：
出來的頁面應該是這樣的
圖2
為了使用jQuery，需要将jQuery引用到這個頁面中，在建立網站項目時VS已經把jQuery放在了Scripts檔案夾中，我們隻需在頁面的<head>部分添加對jQuery的引用。
現在點選送出還沒有任何反應，現在我們為送出按扭添加一個方法，好在點選送出之後執行些什麼。我們讓頁面彈出個消息框，對輸入框中輸入的名字問好。
還是在<head>部分，我們添加如下代碼：
如果不熟悉jQuery，你可能需要簡單學習一下，不過上手很快。Ready()表示頁面元素加載完成之後，再執行ready裡面的function()。現在我們點選送出會彈出一個消息框，如果我們輸入了值的話，消息框中的Hello會加上我們的輸入。
圖3
圖4
上面看到，即使沒有輸入，送出也會成功，現在來增加對輸入是否為空的驗證。
考慮到頁面第一次加載後，輸入框中并沒有輸入，是以一開始我們就需要把送出禁用掉。是以我的基本思路是取到輸入框中的值，如果有輸入，這個值的長度肯定大于0，把送出按扭的disable屬性去掉，讓使用者可以送出，如果沒有輸入，這個值的長度等于0，則什麼也不做。
是以我們在$(document).ready（）增加一個方法，代碼如下：
打開頁面後，第5行的代碼将送出按扭禁止。然後第7行的change方法監聽輸入框中值的變化，如果變化，則進行長度判斷，大于0說明有輸入，移除掉送出按扭的disable屬性使其能用。否則表示沒有輸入，什麼也不做。
圖5
我們輸入東西進去然後單擊頁面空白部分使焦點離開輸入框這時送出按扭可用，彈出了圖4一樣的消息框，工作正常。
但如果我們把剛才的輸入擦掉，再點選，還是可以彈出消息框，說明程式不完善。這是因為第一次輸入之後，程式判斷有值，那麼就把送出按扭激活了，到第二次清空輸入後再點選送出時，按扭依然是激活的，是以出現這種情況。
于是我們$("#submit").click（）方法進行一下修改，在送出時進行判斷，如果有輸入，則正常彈出消息框，如果沒有輸入，則不彈出，并且我們讓輸入框獲得焦點，提示使用者進行輸入。
再次運作，輸入之後，單擊頁面其他空白處激活按扭，再将輸入清空，這時再點選送出，不會彈出消息框了。到這裡，不管完不完美，想要的輸入為空禁用送出功能是實作了。
上面為了激活送出按扭，我們輸入之後還需單擊頁面其他部分讓焦點從輸入框離開，這确實有點不爽。這裡激活送出是調用的change方法，而輸入框的change方法隻有在輸入框失去焦點後才會觸發，這就是為什麼總需要點選頁面其他地方讓光标離開輸入框。
完美的情況應該是我們一旦輸入了東西，按扭就自動激活，而不需要我們再去點其他地方。這時你可能會想到用keydown(),keyup(),或者keypress()這樣的方法來代替change(),這些方法确實可以。但仍會有些小問題。這裡我們試一下用keydown()來代替change()。現在變成隻要輸入框中有鍵按下，就會判斷到有值輸入進而激活送出按扭。
程式運作後，我們發現，在按下第一個字母後，送出按扭還是不可用，在按下第二個字母後，它才變得可用。這是不是黑奇怪！？
對丫，我也覺得黑奇怪。特麼神奇了。
圖6 圖7
仔細分析就會發現問題。keydown是在鍵被按下的時候觸發事件，而剛按下時，鍵值還沒有被輸入到框中，是以此刻的輸入框中長度确實為0，激活按扭的語句沒有沒有被執行到；而當我們按第二個鍵時，因為前面已經輸入了一個字元，是以這回同樣是在按下的瞬間，檢測到框中有值長度為1，是以if語句判斷通過，将送出按扭的disable去掉進而激活。另外，keypress()也有同樣的問題，原因也是一樣的，事件觸發時值還沒有被輸入。還好，最後發現keyup()是可以的。keyup之是以可以是因為它是在按完鍵彈起後才觸發事件，鍵都彈起了，值肯定已經被輸入到框裡面去了嘛，是以此刻觸發if語句進行判斷時，就會得到長度為1。下面是使用keyup()代替change()時的截圖，注意，在輸入第一個字母後，光标還在輸入框中，但按扭已經激活，沒有出現上面keydown()和keypress()一樣的問題了。
圖8
說明keyup()能滿足我們的需求，但再仔細一想，使用者輸入難道必需要按鍵麼，完全可以通過滑鼠右擊然後粘貼，這在填表單時是經常發生的事。這裡我試驗了一下，通過滑鼠右鍵粘貼了東西到輸入框後，這個看似能解決問題的keyup()也挂掉了，送出還是沒有自動激活，需要我們點選其他地方來移除焦點。
圖9
後來我研究了一下，還是找到了一個完美的解決辦法，那就是用bind()來将我們要做的操作綁定到這個輸入框。
最後修改的代碼如下：
現在，不管你是手動輸入，還是Ctrl+V或者滑鼠右鍵的粘貼，送出按扭都能在第一時間被激活。
為了更人性化，當使用者在沒有輸入任何東西試圖送出時，我們應該給點提示資訊告訴使用者要輸入，上面僅僅把焦點轉回輸入框還是不足不夠直覺的。
我們在頁面上加一個<p>标簽來放提示資訊：
平時讓它處于隐藏狀态，隻有當使用者沒有輸入而試圖送出時，才将它顯示出來。并且在使用者輸入之後，提示資訊應該立即消失。修改後的js代碼如下：
運作效果：
圖10
在輸入完登陸的使用者名及密碼後，你是否試過不去點選“登陸”而直接按ctrl+enter鍵優雅而便捷地完成登陸，這個組合鍵也經常用在送出評論。我是覺得這樣的使用者體驗是非常棒的，因為你在完成輸入或者文章的評論後，要把手移開鍵盤去用滑鼠然後再移到相應的按扭上操作，這是很不爽的事。而直接按ctrl+enter送出會便捷得多，至少如果在提供了這樣的功能的網站上，我不會用滑鼠去送出。
而且一般大企業的網站這方面的細節做得比較好，都有這樣的功能。比如你在QQ空間評論好友的說說，可以按ctrl+enter送出。并且這個功能不是很難，隻是幾句代碼的事，我簡直找不到理由不去實作它。
隻需要再加一個ctrl+enter組合鍵的監聽即可，如果監聽到了使用者輸入同時按下ctrl和enter,則執行送出，這與滑鼠點選“送出”的效果是一樣的。
這裡需要用到jQuery提供的bind()方法。Bind()方法允許你将多個事件綁定到同一個頁面元素上，這裡我們的綁定目标是輸入框。這也是在上面的讨論中什麼最後選擇了bind()的原因，不僅解決了上面遇到的那些問題，也是為了向輸入框再綁定一個事件，一舉兩得。
原先綁定的”input”部分需要作一下小小的調整，修改後的代碼如下：
現在的送出按扭還隻是系統提供的預設樣式，為了美觀，我們可以通過定義CSS 樣式來進行簡單美化一下。至少做到按扭換個好看點的，并且在滑鼠放上去時可以變個顔色。
同樣在<head>部分，我們定義一下style。其中按扭要用到的圖檔可以在網上找，也可以下載下傳文章末尾的源碼，裡面包含了圖檔。
更改後的代碼如下：
現在可以看到，我們的頁面是這樣的了。
圖11 圖12
進行到這裡，仔細思考會覺得，我為什麼允許使用者能夠輸入非法值，然後再煞費苦心地去驗證，完了再輸出友情提示：親，你的輸入是非法的，這樣不好~我們完全可以将輸入框設定為隻能輸入我們想要的資料類型，這就是最小使用者假設。我們不願去承擔處理非法輸入的開銷，我們假設使用者隻輸入我們指定的類型，比如在一個前面指名了年齡的輸入框中，按常識使用者當然知道這裡需要輸入的是數字而且必需是正整數！是以在這樣的輸入框裡我們隻接受數字，确切地說是正整數，如果使用者試圖輸入字母或者狂砸鍵盤，隻有數字才會被輸入到輸入框中。
這裡，因為是名字輸入框，應該設定為不接受數字類型及其他特殊符号的輸入，即隻接受a-z,A-Z以前中文字元。
這個時候，就是正規表達式強大功能得到展現的時候了。如果你不熟悉正規表達式，你可能需要簡單的學習下，上手同樣很快。
首先在HTML标簽中為輸入框添加onkeypress事件，并指定事件觸發後的處理器。如下：
然後我們在<javascript>部分來實作這個validate（event）方法，它帶有一個參數，即事件的發送者。緊接着$(document).ready（），我們添加對validate的實作：
最後，我們運作程式測試一下效果。當我們試圖輸入數字時，數字不會上屏，輸入框中沒有任何變化，我們換字母或者漢字時，才能正常輸入。
但測試還發現，換成中文輸入法時，好多符号也能輸入。說明這裡的正規表達式還是有缺陷的，但至少我們屏蔽掉了數字的輸入。
如果你有更好的方法來實作這一部分，請指教，請跟進，共同學習。
後記：看似簡單的一個送出功能，我覺得要做好還是需要花一些時間來掌握的。這裡好多地方也都還有不足，比如文章最後一部分“隻接受特定類型的輸入”，可能面臨很多不兩隻的需求，這裡可能隻需要金錢類型的格式，另外一個地方要求隻能輸入喵星語汪星語，是以不同情況，這裡的實作會有不同，但正規表達式會是一個很好很強大的選擇。
<a href="http://files.cnblogs.com/Wayou/WebApplication1.rar">源碼下載下傳</a>
1.關于jQuery.bind()方法
<a href="http://api.jquery.com/bind/">http://api.jquery.com/bind/</a>
2.ctrl+enter combo key
<a href="http://stackoverflow.com/questions/1684196/ctrlenter-jquery-in-textarea">http://stackoverflow.com/questions/1684196/ctrlenter-jquery-in-textarea</a>
3.Binding Multiple Event Handlers
<a href="http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3">http://www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3</a>
4.Numeric input
<a href="http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input">http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input</a>
5.keycode
<a href="http://www.expandinghead.net/keycode.html">http://www.expandinghead.net/keycode.html</a>