jQuery 表单验证扩展(二)

最新推荐文章于 2025-09-04 18:55:33 发布

转载最新推荐文章于 2025-09-04 18:55:33 发布 · 81 阅读

文章标签：

#javascript #ViewUI

本文介绍了一个基于jQuery的表单验证扩展，支持多种输入类型包括单选和复选框，并详细解析了验证必填项的功能实现及代码示例。

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

一. 存在的问题

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

二. 验证参数的设计

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

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

onFocusText: 获得焦点的文字提示

onFocusClass: 获得焦点之后的样式

onErrorText: 验证错误的文本提示

onErrorClass: 验证错误的样式提示

onSuccessText: 验证成功文本提示

onSuccessClass: 验证成功的样式提示

targetId: 提示信息元素的id号

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

三. 源码解析

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

$.fn.extend({
    checkRequired:function(inputArg){
         // 只有必填项才去验证，非必填项无意义
         if (inputArg.required){
             // 验证是否是输入框表单
             if ($( this ). is ( " input " ) || $( this ). is ( " textarea " )){
                 // 获得焦点提示
                $( this ).bind( " focus " ,function(){
                     // 如果文本存在则不替换提示样式
                     if ($( this ).val() != undefined && $( this ).val() != "" ) {
                         // 显示正确信息文本
                        addText(inputArg.targetId,inputArg.onSuccessText);
                         // 切换样式
                        addClass(inputArg.targetId,inputArg.onSuccessClass);
                    } else {
                         // 显示获得焦点文本
                        addText(inputArg.targetId,inputArg.onFocusText);
                         // 切换样式
                        addClass(inputArg.targetId,inputArg.onFocusClass);
                    }
                });

                 // 失去焦点提示
                $( this ).bind( " blur " ,function(){
                     if ($( this ).attr( " type " ) == " radio " || $( this ).attr( " type " ) == " checkbox " ){
                        var name = $( this ).attr( " name " );
                        var items = $( ' input[@name=""+name+""][checked] ' );
                         if (items.length > 0 ){
                            addMessage( true ,inputArg);
                        } else {
                            addMessage( false ,inputArg);
                        }
                    } else {
                         if ($( this ).val() != undefined && $( this ).val() != "" ){
                            addMessage( true ,inputArg);
                        } else {
                            addMessage( false ,inputArg);
                        }
                    }
                });
            }
        }
    }
});
/* *
* 根据输入框的不同类型来判断
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
     if (flag){
         // 显示正确信息文本
        addText(inputArg.targetId,inputArg.onSuccessText);
         // 切换样式
        addClass(inputArg.targetId,inputArg.onSuccessClass);
    } else {
         // 显示错误信息文本
        addText(inputArg.targetId,inputArg.onErrorText);
         // 切换样式
        addClass(inputArg.targetId,inputArg.onErrorClass);
    }
}
/* *
* 给目标控件添加显示的文本信息
* @param {Object} targetId 目标控件id
* @param {Object} text        需要显示的文本信息
*/
function addText(targetId,text){
     if (text == undefined){
        text = "" ;
    }
    $( " # " + targetId).html( "          " + text);
}
/* *
* 切换样式
* @param {Object} targetId 目标控件id
* @param {Object} className 显示的样式名称
*/
function addClass(targetId,className){
     if (className != undefined && className != "" ){
        $( " # " + targetId).removeClass();
        $( " # " + targetId).addClass(className);
    }
}

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

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

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

/* *
* 根据输入框的不同类型来判断
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
     if (flag){
         // 显示正确信息文本
        addText(inputArg.targetId,inputArg.onSuccessText);
         // 切换样式
        addClass(inputArg.targetId,inputArg.onSuccessClass);
    } else {
         // 显示错误信息文本
        addText(inputArg.targetId,inputArg.onErrorText);
         // 切换样式
        addClass(inputArg.targetId,inputArg.onErrorClass);
    }
}
/* *
* 给目标控件添加显示的文本信息
* @param {Object} targetId 目标控件id
* @param {Object} text        需要显示的文本信息
*/
function addText(targetId,text){
     if (text == undefined){
        text = "" ;
    }
    $( " # " + targetId).html( "          " + text);
}
/* *
* 切换样式
* @param {Object} targetId 目标控件id
* @param {Object} className 显示的样式名称
*/
function addClass(targetId,className){
     if (className != undefined && className != "" ){
        $( " # " + targetId).removeClass();
        $( " # " + targetId).addClass(className);
    }
}

每次不同的验证都会涉及到添加文本消息，表单元素的不同添加文本消息，和样式的替换，于是分离出来上面三个公用方法。

在源码中 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 >

这里不多说了，文章持续更新中！有问题进一步做修改中.......