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>

 

 

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

时间: 2024-10-11 14:24:15

jQuery 表单验证扩展(二)的相关文章

jQuery 表单验证扩展(三)_jquery

在看这篇文章之前, 可以看看前两篇文章,表单验证输入范围验证是在原有的基础上改写的. (一). 输入范围验证存在问题 在第二篇上提到的问题,在原有的验证中也存在相同的问题.当然在这次改写中也解决了一些这些问题.同时也添加了对radio,checkbox,select 元素的验证.当然对于时间的验证仍没有解决,后续过程中会继续补充! (二). 验证参数的设计 onEmptyText: 当输入内容为空的时候显示文本 onEmptyClass: 当输入内容为空的时候显示样式 onSuccessText

jQuery 表单验证扩展(四)

周末写的 jQuery 表单验证扩展(三)  这篇文章点击率过低,不知道是文章太失水准还是什么其他原因,这里写文章只是为了分享一下自己写代码的心得,同时也是巩固自己所学的东西!如果文章中存在问题,请大家多多斧正!本篇文章介绍jQuery 表单验证扩展中的控件值的比较 文章回顾: jQuery 表单验证扩展(三) jQuery 表单验证扩展(二) jQuery 表单验证扩展(一)     (一). 存在的问题 这篇文章和第一篇中提到的控件值之间的比较没有多大的区别,唯一更近的就是在样式的处理.同时

jQuery 表单验证扩展(五)

大概在一个月之前,自己尝试着写一个jQuery的表单验证插件,当初的目的并不是为了让这个插件流行起来,只是为了自己学习的需要.由于工作的问题,这个问题一直处于停留的状态.前些天报名参加了那个什么博客大赛,最近未写一篇博客,当然本文也不是了参加什么博客大赛而写,只是作为自己学习的积累.今天抽空重新整理了一下插件中的正则表达式的验证,在此分享一下.希望大家多多指教   文章回顾: jQuery 表单验证扩展(一)  jQuery 表单验证扩展(二)  jQuery 表单验证扩展(三)  jQuery

jQuery 表单验证扩展代码(二)_jquery

一. 存在的问题 在上篇中我已经提到过,验证提示打算用文本和样式两种方式来显示提示消息,这两种提示都只能单独使用,于是新的跟新内容做了一些扩展,使得两者可以共用.前一篇写的是否必填项这个验证只是正对 Text, TextArea 这两个表单元素,在新的扩展中同时也支持了radio,checkbox 两个元素. 二. 验证参数的设计 基于多重选择的考虑,扩展了一些有必要的参数,参数列表如下: required: 是否为必填项,true 和 false ,true 表示为必填项 (*) onFocu

jQuery 表单验证扩展代码(一)_jquery

再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向.希望各位多多提好的建议善言. 一. 分析表单验证的基本情况 在我们做web开发的过程中,会遇到各种各样的验证.归纳一下基本可以分为一下几类: (1). 是否必填项 [这个是非常基本的] (2). 输入参数中的范围校验 (3). 输入参数与另外一个控件值的比较 (4). 输入的参数正则表达式验证 二. 是否必填项验证 有如下几种情况: (1) 输入框获得焦点提示 (2)输入框失去焦点验证错误提示 (3)输入框失去焦点验证正确提示 首先确定

jQuery 表单验证扩展(一)

好长一段时间没有写js代码了,也好长时间没有写文章了.今天刚申请一个2M 的电信宽带,下午闲来无事写了一个 基于jQuery的表单验证插件.首先申明这个插件问题比较多,不过觉得这个东西很有必要.后期持续跟新中,先把自己写的插件原型拿出来晒晒! 再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向.希望各位多多提好的建议善言.    一. 分析表单验证的基本情况 在我们做web开发的过程中,会遇到各种各样的验证.归纳一下基本可以分为一下几类: (1). 是否必填项 [这个是非常基本的] (2

深入学习jQuery Validate表单验证(二)_jquery

本文实例介绍了jQuery Validate表单验证,分享给大家供大家参考,具体内容如下 一.添加一个另外一个插件jquery.validate.messages_cn.js. 改变默认提示方式. /* * Translated default messages for the jQuery validation plugin. * Language: CN * Author: Fayland Lam <fayland at gmail dot com> */ jQuery.extend(jQ

JQuery表单验证插件EasyValidator用法分析_jquery

本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp

jQuery 表单验证插件formValidation实现个性化错误提示_javascript技巧

其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&