目錄
上次我們說完jQuery中的動畫之后，我們再來看一種jQuery在Web網頁應用最為廣泛的一種形式，這就是jQuery對表單的操作，通過jQuery對表單的操作，可以有效的提高用戶體驗。在此之前，我們首先要了解表單的組成部分。表單大致有3個部分組成。
第一部分由表單標簽組成，包含url及所提交的方法。即我們通常寫到的<form action=”#” method=”post”>當然提交方法也可以是get，他們之間的區別再次就不做討論。
第二部分由表單域組成:包含文本框、密碼框、隱藏域、多行文本框、復選框等等。
第三部分由表單按鈕組成：包含提交按鈕、復位按鈕、一般按鈕，用於控制將數據傳送到服務器或者取消傳送。
jQuery中對表單的操作主要是針對於第二部分，即對表單域的操作，例如對文本框、密碼框、隱藏域的操作等等。首先我們先來看一個jQuery對表單的一個最簡單的應用。
一. 單行文本框的應用
此處，我們首先來看HTML代碼。
<form action="#" method="post" id="regForm"> <fieldset> <legend>個人基本信息</legend> <div> <label for="username"> 名稱：</label> <input id="username" type="text" value="admin" /> </div> <div> <label for="password"> 密碼：</label> <input type="password" id="password" value="123456" /> </div> <div> <label for="msg"> 詳細信息：</label> <textarea rows="3" cols="15">詳細信息</textarea> </div> </fieldset> </form>初始化HTML代碼后，如圖1所示
我們所需要做的效果就是當光標移入文本框的時候，會出現陰影，表示此時正在操作的正是此行的文本框，效果就如圖2所示。
那么應該如何達到這個效果呢？其實非常簡單，就是為文本框添加兩個事件：focus與blur事件。具體jQuery代碼如下所示。
<script type="text/javascript"> $(function () { //加載DOM $(":input").focus(function () { //選中所有input標簽,為其添加focus事件，即當光標移入所選區域內所觸發的事件 $(this).addClass("focus"); //此處為其添加樣式"focus”，注意我的樣式寫到了樣式表中，此處未列出，樣式即加背景與邊框 }).blur(function () { //此處添加blur事件 $(this).removeClass("focus"); //移除樣式 }); }); </script>
此時便完成了我們預定的目標。
二. 表單驗證
在各大網站中，jQuery應用最廣泛的一種恐怕就是表單驗證了吧。無論是我們在申請或者填寫登錄信息的時候，或多或少都會用到表單驗證。我們在這里就好好說說表單驗證！可能很多人都會用插件來用於表單驗證，我們在這里首先自己寫一種表單驗證，然后我們再通過插件再來寫一次表單驗證，便於理解。
還是老樣子，我們首先來看HTML代碼。
<form action="" method="post"> <div> <div class="int"> <label for="username"> 用戶名：</label> <input type="text" name="username" class="required" id="username" /> </div> <div class="int"> <label for="email"> 郵箱：</label> <input type="text" name="email" class="required" id="email" /> </div> <div class="int"> <label for="personmsg"> 個人資料</label> <input type="text" name="personmsg" /> </div> <div class="sub"> <input type="submit" id="send" value="提交" /><input type="reset" id="res" value="重置" /> </div> </div> </form>
我們再為其添加css樣式后，此處不列出css樣式,使其顯示如圖3所示。
我們的目標效果是：1. 用戶名及郵箱為必填項，如果沒有填寫，提示用戶填寫。
2.對用戶名及郵箱進行有效性驗證，要求用戶名至少為6位，當用戶輸入小於6位時，則會提示用戶“請輸入至少6位用戶名”,郵箱中必須復合郵箱規范。
我們先整理下思路：1. 首先我們尋找表單中的必填文本框，即class=”required“的文本框，為其添加樣式”*“。
2. 針對用戶名及密碼的文本框，我們進行有效性判斷，這里我們以用戶名的文本框為例進行分析，當光標離開文本框的時候應觸發blur事件，此時開始判斷用戶所輸入內容的有效性，我們在這里假定用戶名至少為6位，通過判斷文本框的值的長度來返回不同的信息，如果用戶輸入內容為空或者字符小於6位，則返回一個錯誤消息提示用戶輸入必須至少6位，需要注意的是，我們在返回消息時候可以為其添加樣式，當然樣式最好定義在css中（樣式中最好帶有圖片），如圖4所示。如果輸入長度大於等於6位，我們則返回正確信息，並為其添加好樣式，如圖5所示。同理，也為郵箱進行有效性判斷，不過這里值得注意的是，郵箱是通過正則表達式進行判斷的。
3. 好了，大致這些就進行的可以了，但是，如何能更好的提高用戶體驗呢？那就是我們希望，用戶在焦點引入文本框的時候就能夠進行提示，並且每鍵入一個字符的時候，就可以再次進行有效性驗證！那么就在上面的基礎上在為文本框添加兩個事件focus與keyup事件，此時我們直接在這兩個事件中添寫triggerHandler(“blur”)就可以，此處一定要寫triggerHandler，而不能是trigger，如果寫trigger的話，則不但會激活我們寫的blur事件，同時也會激活其自帶的鼠標blur事件，而triggerHandler則可以將系統默認鼠標blur事件關閉。
4. 當然，最后我們也應該為兩個按鈕添加click事件。那么我們就來具體看看代碼吧。
<script type="text/javascript"> $(function () { //加載DOM //遍歷class="required"的元素，即必填元素，並為其添加* $("input.required").each(function () { var $required = $("<strong class='high'>*</strong>"); $(this).parent().append($required); }); //為表單添加失去焦點的事件 $("form :input").blur(function () { $(this).parent().find(".formtips").remove(); if ($(this).is("#username")) { //驗證用戶名 if (this.value == "" || this.value.length < 6) { var errorMsg = "請輸入至少6位用戶名"; $(this).parent().append("<span class='formtips onError'>" + errorMsg + "</span>"); } else { var okMsg = "輸入正確"; $(this).parent().append("<span class='formtips onOk'>" + okMsg + "</span>"); } } if ($(this).is("#email")) { //驗證郵箱 if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) { var errorMsg = "請輸入正確的郵箱地址"; $(this).parent().append("<span class='formtips onError'>" + errorMsg + "</span>"); } else { var okMsg = "輸入正確"; $(this).parent().append("<span class='formtips onOk'>" + okMsg + "</span>"); } } }).keyup(function () { $(this).triggerHandler("blur"); }).focus(function () { $(this).triggerHandler("blur"); }); //提交，通過判斷返回的Error的次數來判斷是否可以提交 $("#send").click(function () { $("input.required").trigger("blur"); var numError = $("form .onError").length; if (numError) { return false; } alert("success!"); }); //重置 $("#res").click(function () { $(".formtips").remove(); }); }) </script>
看了這一大推代碼后，肯定心中會產生個想法，有沒有在jQuery的基礎上封裝好的一種插件使我們可以通過引用插件對表單進行驗證，從而可以高效率的開發呢？答案當然是肯定的，在http://www.plugins.jquery.com中我們可以找到一款名為validation的插件。在此，我們用插件重新開發一次！
HTML代碼如以先前HTML代碼類似，我們具體來看jQuery代碼。
<script type="text/javascript"> $(document).ready(function () { $("#infoForm").validate({ //驗證的是id="infoForm"的表格 rules: { //定義驗證規則rules username: { //對用戶名的驗證規則 required: true, minlength: 6 }, email: { //對email的驗證規則 required: true, email:true } }, messages: { //返回的驗證信息 username: { required: "請輸入用戶名", minlength: "請至少輸入6個字符" }, email: { required: "請輸入郵箱", email: "請檢查所輸入的郵箱格式" } } }); }) </script>
用插件來寫jQuery，相對而言更好寫，這里需要注意的是validate中的與form的驗證是通過<input>的name屬性進行關聯驗證的，如用戶名的驗證，通過寫好username驗證。
就先寫到這里吧，利用好jQuery中對表單的驗證，可以有效提高用戶的體驗！