1、 啓用或禁用表單元素：
html代碼：<input type="text" id = "name-input" />
添加一條代碼禁用上面的表單：$("#name-inout").attr("disabled",true);
如果要啓用表單，則把disabled屬性設置成false即可
2、突出顯示錶單當前項：
html代碼：<input type=‘text“ id= ”email-input“ />
CSS樣式：.highlight{background:yellow;padding:5px;}
jQuery代碼：$('input').bind('focus',function(){
$(this).addClass('highlight');
}); //當input元素得到焦點時，這個輸入項就會自動應用highlight類
$('input').bind('blur',function(){
$(this).removeClass('highlight');
}); //當input元素失去焦點時，這個輸入項就會移除highlight類
3、爲文本框設置默認文本：（1）、html代碼：<input type=‘text“ id= ”email-input“ value="Search" />
（2）、創建一個變量，存放計劃顯示在文本框的默認值：var defaultText ="Search";
（3）、選中#email-input元素。然後綁定focus事件處理函數：
$("#email-input").bind('focus',function(){ });
（4）、在focus事件處理函數中，添加一條if語句檢查文本框的值。如果文本框有值並且它的值與defaultText相同，清除文本框的值
$("#email-input").bind('focus',function(){
if($(this).val() == defaultText){
$(this).val(' ');
}
$(this).css('color','#333');
});
（5）、接下來設置#email-input失去焦點時要觸發的blur事件。同樣需要添加一條if語句檢查this的值。如果沒有內容，則設置成defaultText。
$("#email-input").bind('blur',function(){
if($(this).val() ==' '){
$(this).val(defaultText);
}
$(this).css('color','#fff');
});
4、限制文本輸入框的字數：
（1）、html文檔：<textarea cols ="50" rows="5" id= "status"></textarea>
（2）、添加一個空白的div#content元素，用它存放輸入字符過程中計算出來的剩餘字符數：<div id= "counter"></div>
（3）、新建一個變量maxNum，保存允許輸入的最大字符數，這裏設置成100：var maxNum=100;
（4）、選中#status元素，然後爲它綁定keypress事件處理函數。keypress事件發生於一個鍵被按下然後釋放時，它是檢測文本框中用戶輸入的最佳事件
$('#status').bind({
keypress:function(){
}
});
（5）、當keypress事件發生時，我們需要捕獲#status輸入框中的內容。創建一個變量inputText保存輸入框的值，在創建一個變量numChar保存inputText的length屬性。在創建一個變量charRemain，保存剩餘字符數
$('#status').bind({
keypress:function(){
var inputText=$(this).val();
var numChar = inputText.length;
var charRemain =numChar-maxNum;
}
});
（6）、初始化這些變量之後，再加一個條件語句檢查numChar是否小於等於maxNum。如果小於等於，就選中，並修改它的文本爲剩餘字符數
$('#status').bind({
keypress:function(){
var inputText=$(this).val();
var numChar = inputText.length;
var charRemain =numChar-maxNum;
if(numChar <=maxNum){
$('#counter').text(charRemain);
}
}
});
（7）、最後再加一條語句檢查numChar是否大於maxNum，如果爲真，使用event.preventDefault()阻止用戶輸入更多字符
$('#status').bind({
keypress:function(){
var inputText=$(this).val();
var numChar = inputText.length;
var charRemain =numChar-maxNum;
if(numChar <=maxNum){
$('#counter').text(charRemain);
}
else if(numChar>maxNum){
event.preventDefault();
}
}
});
5、實現複選框的全選功能：
（1）、準備5個複選框元素，並添加一個複選框用來控制5個複選框的選中或反選<input type="checkbox" id="checkall" /> <label>Check all</label>
<ul id="form-fields">
<li><input name="check1" class="check" type="checkbox"/> <label>Checkbox 1</label></li>
<li><input name="check2" class="check" type="checkbox"/> <label>Checkbox 2</label></li>
<li><input name="check2" class="check" type="checkbox"/> <label>Checkbox 3</label></li>
<li><input name="check2" class="check" type="checkbox"/> <label>Checkbox 4</label></li>
<li><input name="check2" class="check" type="checkbox"/> <label>Checkbox 5</label></li>
</ul>
（2）、選中#checkall元素，爲它綁定click事件
$('checkall').bind('click',function(){ });
（3）、新建變量checkboxes選中所有li元素並在其中尋找所有.check元素，然後將匹配的結果集保存到變量checkboxes中
$('checkall').bind('click',function(){
var checkboxes = $('form-fields input');
});
（4）、如果還需要取消全選功能，可以加一條if / else語句檢查#checkAll元素的狀態，選中就保存在checkboxes變量中的複選框結果集中的每一個複選框的checked屬性爲true，否則就設置爲false
$('checkall').bind('click',function(){
var checkboxes = $('form-fields input');
if (this.checked){
checkboxes.attr('checked','true');
} else{
checkboxes.attr('checked','false');
}
});
6、簡單驗證表單中的電子郵件：
（1）、首先創建一個簡單的電子郵件表單，只有一個輸入框和一個Submit按鈕<div id="email-form">
<input type="text" id="email-input"/>
<input type="submit" value="Submit" id="email-submit"/>
</div>
（2）、選中#email-submit按鈕併爲它綁定click事件處理函數。在click事件處理函數中添加一條return false語句，這就確保了用戶在單擊Submit按鈕時，腳本會終止表單默認的提交行爲
$(" #email-submit").bind('click', function(){
return false;
});
（3）、創建一個變量emailReg，然後把檢測電子合法性的正則表達式賦值給這個新變量：
$(" #email-submit").bind('click', function(){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return false;
});
（4）、創建一個email變量，將email-input的值賦給他：
$(" #email-submit").bind('click', function(){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var email=$("#email-input").val();
return false;
});
（5）、選中email-form元素並在表單內容之前插入一個div.error。使用它存放必要時傳遞給用戶的出錯信息
$(" #email-submit").bind('click', function(){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var email=$("#email-input").val();
$('email-form').prepend('<div class= "error"></div>');
return false;
});
（6）、添加一條else if語句，當用戶單擊Submit按鈕時檢查用戶是否鍵入內容
$(" #email-submit").bind('click', function(){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var email=$("#email-input").val();
$('email-form').prepend('<div class= "error"></div>');
if(email==' '){
} else if{
} else{
}
return false;
});
（7）、在if子句中，選中div.error元素，替換成錯誤格式信息。else if子句中換成錯誤格式信息，else子句中告訴用戶他們已經成功訂閱
$(" #email-submit").bind('click', function(){
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var email=$("#email-input").val();
$('email-form').prepend('<div class= "error"></div>');
if(email==' '){
$(".error").replaceWith('<div class="error">You forgot to enter an email address.</div>');
} else if{
$(".error").replaceWith('<div class="error">Please enter a valid email address.</div>');
} else{
$("#email-form").html('<div class="success">Thank you, you have been subscribed.</div>');
}
return false;
});
下面是改進這個腳本的建議：
（1）、如果希望在用戶輸入數據時實現實時檢測，可以把綁定Submit按鈕上的click事件改爲綁定到input元素上的change事件。這樣的話就要再加一些代碼，以保證用戶看到正確的提示信息
（2）、若用戶提交了錯誤格式的電子郵件地址，爲電子郵件輸入框增加突出顯示效果
（3）、下面是常用的正則表達式爲表單添加更多的字段，驗證其他數據類型的數據
電話號碼：(/^[0-9-+]+$/)
日期：(/^\d{1,2}\ / \d{4}$/)
僅數字：(^[0-9]+$)
僅字母：(^[A-Za-z]+$)