前些天写了一篇文章 jQuery 表单验证扩展(一) ，这是jQuery表单验证扩展的一个雏形，里面有了一些基本的功能！昨晚再次努力了一下，对表单中是否必填项验证这个部分做了一些修改的扩充！

一. 存在的问题

在上篇中我已经提到过，验证提示打算用文本和样式两种方式来显示提示消息，这两种提示都只能单独使用，于是新的跟新内容做了一些扩展，使得两者可以共用。前一篇写的是否必填项这个验证只是正对 Text， TextArea 这两个表单元素，在新的扩展中同时也支持了radio，checkbox 两个元素。

二. 验证参数的设计

基于多重选择的考虑，扩展了一些有必要的参数，参数列表如下：

required:  是否为必填项，true 和 false ，true 表示为必填项 (*)

onFocusText: 获得焦点的文字提示

onFocusClass: 获得焦点之后的样式

onErrorText: 验证错误的文本提示

onErrorClass: 验证错误的样式提示

onSuccessText: 验证成功文本提示

onSuccessClass: 验证成功的样式提示

targetId: 提示信息元素的id号

相比之前的做了一些修改，看过之前的文章会知道，我将样式和文本单独分离了，之前是混合在一起的。这也是作为扩展需要的一步考虑。然后变更了错误消息提示参数的名称。 

三.  源码解析

jQuery 表单验证扩展之验证是否为必填项源码

1. $.fn.extend({ 
2.     checkRequired:function(inputArg){ 
3.         //只有必填项才去验证，非必填项无意义 
4.         if(inputArg.required){ 
5.             //验证是否是输入框表单 
6.             if($(this).is("input") || $(this).is("textarea")){ 
7.                 //获得焦点提示 
8.                 $(this).bind("focus",function(){ 
9.                     //如果文本存在则不替换提示样式 
10.                     if ($(this).val() != undefined && $(this).val() != "") { 
11.                         //显示正确信息文本 
12.                         addText(inputArg.targetId,inputArg.onSuccessText); 
13.                         //切换样式 
14.                         addClass(inputArg.targetId,inputArg.onSuccessClass); 
15.                     }else{ 
16.                         //显示获得焦点文本 
17.                         addText(inputArg.targetId,inputArg.onFocusText); 
18.                         //切换样式 
19.                         addClass(inputArg.targetId,inputArg.onFocusClass); 
20.                     } 
21.                 }); 
22.                  
23.                 //失去焦点提示 
24.                 $(this).bind("blur",function(){ 
25.                     if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){ 
26.                         var name=$(this).attr("name"); 
27.                         var items=$('input[@name=""+name+""][checked]'); 
28.                         if(items.length>0){ 
29.                             addMessage(true,inputArg); 
30.                         }else{ 
31.                             addMessage(false,inputArg); 
32.                         } 
33.                     }else{ 
34.                         if($(this).val()!=undefined && $(this).val()!=""){ 
35.                             addMessage(true,inputArg); 
36.                         }else{ 
37.                             addMessage(false,inputArg); 
38.                         } 
39.                     } 
40.                 }); 
41.             } 
42.         } 
43.     } 
44. }); 
45. /** 
46.  * 根据输入框的不同类型来判断 
47.  * @param {Object} flag 
48.  * @param {Object} inputArg 
49.  */ 
50. function addMessage(flag,inputArg){ 
51.     if(flag){ 
52.         //显示正确信息文本 
53.         addText(inputArg.targetId,inputArg.onSuccessText); 
54.         //切换样式 
55.         addClass(inputArg.targetId,inputArg.onSuccessClass); 
56.     }else{ 
57.         //显示错误信息文本 
58.         addText(inputArg.targetId,inputArg.onErrorText); 
59.         //切换样式 
60.         addClass(inputArg.targetId,inputArg.onErrorClass); 
61.     } 
62. } 
63. /** 
64.  * 给目标控件添加显示的文本信息 
65.  * @param {Object} targetId 目标控件id 
66.  * @param {Object} text        需要显示的文本信息 
67.  */ 
68. function addText(targetId,text){ 
69.     if(text==undefined){ 
70.         text=""; 
71.     } 
72.     $("#"+targetId).html("        "+text); 
73. } 
74. /** 
75.  * 切换样式 
76.  * @param {Object} targetId 目标控件id 
77.  * @param {Object} className 显示的样式名称 
78.  */ 
79. function addClass(targetId,className){ 
80.     if(className!=undefined && className!=""){ 
81.         $("#"+targetId).removeClass(); 
82.         $("#"+targetId).addClass(className); 
83.     } 
84. } 

用过jQuery 的都知道，jQuery是一个非常易于扩展的框架，它里面提供了扩展核心库的函数。本表单验证都是基于这个扩展函数来延伸的。

 这里还考虑到了一些代码复用性的问题，将共同代码分离，这使得最终的代码大大减少了。

jQuery 表单验证扩展 必填项共同方法提取

1. /** 
2.  * 根据输入框的不同类型来判断 
3.  * @param {Object} flag 
4.  * @param {Object} inputArg 
5.  */ 
6. function addMessage(flag,inputArg){ 
7.     if(flag){ 
8.         //显示正确信息文本 
9.         addText(inputArg.targetId,inputArg.onSuccessText); 
10.         //切换样式 
11.         addClass(inputArg.targetId,inputArg.onSuccessClass); 
12.     }else{ 
13.         //显示错误信息文本 
14.         addText(inputArg.targetId,inputArg.onErrorText); 
15.         //切换样式 
16.         addClass(inputArg.targetId,inputArg.onErrorClass); 
17.     } 
18. } 
19. /** 
20.  * 给目标控件添加显示的文本信息 
21.  * @param {Object} targetId 目标控件id 
22.  * @param {Object} text        需要显示的文本信息 
23.  */ 
24. function addText(targetId,text){ 
25.     if(text==undefined){ 
26.         text=""; 
27.     } 
28.     $("#"+targetId).html("        "+text); 
29. } 
30. /** 
31.  * 切换样式 
32.  * @param {Object} targetId 目标控件id 
33.  * @param {Object} className 显示的样式名称 
34.  */ 
35. function addClass(targetId,className){ 
36.     if(className!=undefined && className!=""){ 
37.         $("#"+targetId).removeClass(); 
38.         $("#"+targetId).addClass(className); 
39.     } 
40. } 

 每次不同的验证都会涉及到 添加文本消息，表单元素的不同添加文本消息，和样式的替换，于是分离出来上面三个公用方法。
 在源码中 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox") 这句是比较重要的一句，因为它涉及到了验证元素的扩展。

四. 使用例子
文本框测试样图 

 输入文本框获得焦点提示

 输入文本框失去焦点错误提示

 输入文本验证正确提示

radio 测试样图

checkbox 测试样图

  checkbox 验证失败提示

 checkbox 验证成功提示

验证必填项测试代码

1. <script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script> 
2.         <script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script> 
3.         <script language="JavaScript" type="text/javascript"> 
4.             $(document).ready(function(){ 
5.                 $("#txtName").checkRequired({ 
6.                     required:true, 
7.                     onFocusText:"必填项", 
8.                     onFocusClass:"notice", 
9.                     onErrorText:"错误提示", 
10.                     onErrorClass:"error", 
11.                     onSuccessClass:"correct", 
12.                     targetId:"txtNameTip" 
13.                 }); 
14.                  
15.                 $("#rdbMan").checkRequired({ 
16.                     required:true, 
17.                     onFocusText:"必填项", 
18.                     onFocusClass:"notice", 
19.                     onErrorText:"错误提示", 
20.                     onErrorClass:"error", 
21.                     onSuccessClass:"correct", 
22.                     targetId:"txtSexTip" 
23.                 }); 
24.                 $("#rdbWoman").checkRequired({ 
25.                     required:true, 
26.                     onFocusText:"必填项", 
27.                     onFocusClass:"notice", 
28.                     onErrorText:"错误提示", 
29.                     onErrorClass:"error", 
30.                     onSuccessClass:"correct", 
31.                     targetId:"txtSexTip" 
32.                 }); 
33.                  
34.                  
35.                  
36.                 $("#rdbMan1,#rdbWoman2,#rdbMan3,#rdbWoman4").checkRequired({ 
37.                     required:true, 
38.                     onFocusText:"必填项", 
39.                     onFocusClass:"notice", 
40.                     onErrorText:"错误提示", 
41.                     onErrorClass:"error", 
42.                     onSuccessClass:"correct", 
43.                     targetId:"txthobbyTip" 
44.                 }); 
45.             }); 
46.         </script> 
47.  
48.  
49. <p> 
50.             <label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span> 
51.         </p> 
52.  
53. <p> 
54.             <label>性别:</label> 
55.             <span> 
56.                 <input id="rdbMan" type="radio" name="sex" value="男" />男 &nbsp;&nbsp;&nbsp; 
57.                 <input id="rdbWoman" type="radio" name="sex" value="女" />女 
58.             </span> 
59.             <span id="txtSexTip"></span> 
60.         </p> 
61.         <p> 
62.             <label>爱好:</label> 
63.             <span> 
64.                 <input id="rdbMan1" type="checkbox" name="hobby" value="hobby1" />aa &nbsp;&nbsp;&nbsp; 
65.                 <input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb&nbsp;&nbsp;&nbsp; 
66.                 <input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa &nbsp;&nbsp;&nbsp; 
67.                 <input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb&nbsp;&nbsp;&nbsp; 
68.             </span> 
69.             <span id="txthobbyTip"></span> 
70.         </p>