zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    linux下清空文件的几种方式以及对比
    远程桌面连接无法验证您希望连接的计算机的身份-mac连接远程桌面
    Linux配置临时IP和网关命令
    linux(centos、ubuntu)网卡配置文件不生效
    负载均衡
    Zookeeper基础使用机制原理
    高性能RPC框架选型
    事务隔离机制
    一致性协议Raft
    机器学习入门
  • 原文地址:https://www.cnblogs.com/qingyuan/p/1850942.html
Copyright © 2011-2022 走看看