当前位置： 首页 > news >正文

jQuery 表单验证扩展(四)

news 来源：原创 2024/5/17 16:27:45

周末写的 jQuery 表单验证扩展(三)  这篇文章点击率过低，不知道是文章太失水准还是什么其他原因，这里写文章只是为了分享一下自己写代码的心得，同时也是巩固自己所学的东西!如果文章中存在问题，请大家多多斧正！本篇文章介绍jQuery 表单验证扩展中的控件值的比较

文章回顾:

jQuery 表单验证扩展(三)

jQuery 表单验证扩展(二)

jQuery 表单验证扩展(一)  

 

(一). 存在的问题

这篇文章和第一篇中提到的控件值之间的比较没有多大的区别，唯一更近的就是在样式的处理。同时就是对代码进行了简化。但是这里还是单独拿出来讲解一下，此文非常简单，所以不会有大篇幅的讲解。 

 

(二). 参数介绍

onFocusText:获得焦点提示文字

onFocusClass:获得焦点样式

onEmptyText:当输入项为空显示文字

onEmptyClass:当输入项为空显示样式

onErrorText:验证错误显示文字

onErrorClass:输入验证错误显示样式

onSuccessText:输入成功显示文本

onSuccessClass:输入成功显示样式

comType:比较类型

dataType:输入比较内容的数据类型

dataType:输入比较内容的数据类型

comId:相比较的目标控件ID

targetId:用于显示提示信息的控件id

 

这里的比较类型分为如下几种: “==”   “！=”   “>”   “>=”   “<”   <=“” 

比较的数据类型分为如下几种: "text"  "number"  "date" 

这里对date 数据类型还没有做任何处理，在后期过程中更新

 

(三). 控件值之间的比较源码解析

ExpandedBlockStart.gif jQuery控件值之间的比较 源码解析
/* *
 * onFocusText:获得焦点提示文字
 * onFocusClass:获得焦点样式
 * onEmptyText:当输入项为空显示文字
 * onEmptyClass:当输入项为空显示样式
 * onErrorText:验证错误显示文字
 * onErrorClass:输入验证错误显示样式
 * onSuccessText:输入成功显示文本
 * onSuccessClass:输入成功显示样式
 * comType:比较类型
 * dataType:输入比较内容的数据类型
 * comId:相比较的目标控件ID
 * targetId:用于显示提示信息的控件id
 * @param {Object} inputArg
  */
$.fn.extend({
    checkCompare: function (inputArg){
         // 只验证输入框信息
         if ($( this ).is( " input " )  ||  $( this ).is( " textarea " )){
             if ($( this ).attr( " type " ) != " radio "   &&  $( this ).attr( " type " ) != " checkbox " ){
                
                 // 绑定获得焦点事件
                $( this ).bind( " focus " , function (){
                     var  value = $( this ).val();
                     if (value != undefined  &&  value != "" ){
                        
                    } else {
                         // 显示获得焦点文本
                        addText(inputArg.targetId,inputArg.onEmptyText);
                         // 切换样式
                        addClass(inputArg.targetId,inputArg.onEmptyClass);
                    }
                });
                
                 // 绑定失去焦点事件
                $( this ).bind( " blur " , function (){
                     var  value = $( this ).val();
                     if (value == undefined  ||  value == "" ){
                         // 显示获得焦点文本
                        addText(inputArg.targetId,inputArg.onEmptyText);
                         // 切换样式
                        addClass(inputArg.targetId,inputArg.onEmptyClass);
                    } else {
                         var  targetValue = $( " # " + inputArg.comId).val();
                         var  flag = false ;
                         switch (inputArg.dataType){
                             case   " text " :
                                 if (inputArg.comType  ==   " == " ){ 
                                    flag = value == targetValue ? true : false ;
                                } else   if (inputArg.comType == " != " ){
                                    flag = value != targetValue ? true : false ;
                                }
                             break ;
                             case   " number " :
                                 if (inputArg.comType == " == " ){
                                    flag = value == targetValue ? true : false ;
                                } else   if (inputArg.comType == " != " ){
                                    flag = value != targetValue ? true : false ;
                                } else   if (inputArg.comType == " > " ){
                                    flag = value > targetValue ? true : false ;
                                } else   if (inputArg.comType == " >= " ){
                                    flag = value >= targetValue ? true : false ;
                                } else   if (inputArg.comType == " < " ){
                                    flag = value < targetValue ? true : false ;
                                } else   if (inputArg.comType == " <= " ){
                                    flag = value <= targetValue ? true : false ;
                                }
                             break ;
                             case   " date " :
                             break ;
                        }
                         if (flag){
                             // 显示获得焦点文本
                            addText(inputArg.targetId, inputArg.onSuccessText);
                             // 切换样式
                            addClass(inputArg.targetId, inputArg.onSuccessClass);
                        } else {
                             // 显示获得焦点文本
                            addText(inputArg.targetId, inputArg.onErrorText);
                             // 切换样式
                            addClass(inputArg.targetId, inputArg.onErrorClass);
                        }
                    }
                });
            }
        }
    }
});

 

  这段代码其实非常简单了，因为没有涉及到复杂的判断，只是在不同类型值之间的比较关系，同时也限定了比较的控件类型text 和 textarea 两种元素。这个大大简化了验证的复杂度。这段代码相对之间也有所精简，这里的精简不是对功能的减少，而是对代码的重构，方法的提取。这里面用到了上几篇文章的功用方法，用于添加文本和修改样式信息。

ExpandedBlockStart.gif 添加文本和样式信息 功用代码解析
/* *
 * 根据输入框的不同类型来判断
 * @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( " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; " + text);
}
 /* *
 * 切换样式
 * @param {Object} targetId 目标控件id
 * @param {Object} className 显示的样式名称
  */
function  addClass(targetId,className){
     if (className != undefined  &&  className != "" ){
        $( " # " + targetId).removeClass();
        $( " # " + targetId).addClass(className);
    }
}

 

  内容还是一样，没有做任何更改，这里再次贴出这段代码，是为了方便查看方法体，没有其他的作用！

 

(四). 使用例子

字符串之间的比较效果图

 获得焦点时候提示

 失去焦点验证错误提示

 失去焦点验证成功

以上是对字符的比较验证，其验证测试代码如下

ExpandedBlockStart.gif 控件字符串之间的验证
< html >
     < head >
         < meta http - equiv = " Content-Type "  content = " text/html; charset=UTF-8 " >
         < title > Untitled Document < / title>
         < link type = " text/css "  rel = " stylesheet "  href = " new_file.css "/ >
         < script language = " JavaScript "  type = " text/javascript "  src = " jquery-1.3.2.min.js " >< / script>
         < script language = " JavaScript "  type = " text/javascript "  src = " jquery-extend-1.0.0.js " >< / script>
         < script language = " JavaScript "  type = " text/javascript " >
            $(document).ready( function (){
                $( " #txtPass2 " ).checkCompare({
                    onFocusText: " 要和上面的填写一样哦 " ,
                    onFocusClass: " notice " ,
                    onEmptyText: " 不允许为空，你要听话点 " ,
                    onEmptyClass: " error " ,
                    onErrorText: " 验证错误了，请你认真填写 " ,
                    onErrorClass: " error " ,
                    onSuccessText: " 恭喜啊 成功了 " ,
                    onSuccessClass: " correct " ,
                    comType: " == " ,
                    dataType: " text " ,
                    comId: " txtPass1 " ,
                    targetId: " txtPass2Tip "
                });
            });
         < / script>
     < / head>
     < body >
         < p >
             < label > 密码1: < / label><input type="text" id="txtPass1" value="" / >< span id = " txtPass1Tip " >< / span>
         < / p>
         < p >
             < label > 密码2: < / label><input type="text" id="txtPass2" value="" / >< span id = " txtPass2Tip " >< / span>
         < / p>
     < / body>
< / html>

 

 

  数字之间的验证

 数字验证获得焦点提示作用

 数字验证失去焦点验证失败

 数字验证失去焦点验证成功

ExpandedBlockStart.gif 控件数字之间的比较验证
< html >
     < head >
         < meta http - equiv = " Content-Type "  content = " text/html; charset=UTF-8 " >
         < title > Untitled Document < / title>
         < link type = " text/css "  rel = " stylesheet "  href = " new_file.css "/ >
         < script language = " JavaScript "  type = " text/javascript "  src = " jquery-1.3.2.min.js " >< / script>
         < script language = " JavaScript "  type = " text/javascript "  src = " jquery-extend-1.0.0.js " >< / script>
         < script language = " JavaScript "  type = " text/javascript " >
            $(document).ready( function (){
                $( " #txtPass2 " ).checkCompare({
                    onFocusText: " 结果要比前面的大 " ,
                    onFocusClass: " notice " ,
                    onEmptyText: " 不允许为空，你要听话点 " ,
                    onEmptyClass: " error " ,
                    onErrorText: " 验证错误了，请你认真填写 " ,
                    onErrorClass: " error " ,
                    onSuccessText: " 恭喜啊 成功了 " ,
                    onSuccessClass: " correct " ,
                    comType: " > " ,
                    dataType: " number " ,
                    comId: " txtPass1 " ,
                    targetId: " txtPass2Tip "
                });
            });
         < / script>
     < / head>
     < body >
         < p >
             < label > 密码1: < / label><input type="text" id="txtPass1" value="" / >< span id = " txtPass1Tip " >< / span>
         < / p>
         < p >
             < label > 密码2: < / label><input type="text" id="txtPass2" value="" / >< span id = " txtPass2Tip " >< / span>
         < / p>
     < / body>
< / html>

 

 

  文章内容不想做过多的解释了，此文非常简单，相对于前面几篇文章来说。表单验证扩展不断更新中，后续期待............

相关文章：

  • CCNA笔记`（1）网络互联   OSI模型
  • WinForm程序中未处理异常的解决方法(转)
  • ORACLE10G DATAGUARD配置笔记
  • 动态生成内表
  • C# params ref out 使用小结
  • 30天敏捷结果（13）：如何对事情付诸行动
  • 把我的悲伤留给自己（Zz）
  • NetBeans IDE 6.9 第二个补丁版发布
  • 两本路由器新书在各大书店隆重闪亮登场啦
  • 如何下载Chrome离线安装包 MSI系统级安装包
  • 写了个小软件《这货不是猩猩》
  • 程序员的5年前与5年后，写在2010年的感恩节
  • Redis小尝试
  • IPSec ×××SSL ×××
  • 快速定位 摆脱运维所累
  • [LeetCode] Wiggle Sort
  • Angularjs之国际化
  • bootstrap创建登录注册页面
  • iBatis和MyBatis在使用ResultMap对应关系时的区别
  • JavaScript新鲜事·第5期
  • JS 面试题总结
  • JWT究竟是什么呢?
  • Netty+SpringBoot+FastDFS+Html5实现聊天App(六)
  • Next.js之基础概念（二）
  • PHP 使用 Swoole - TaskWorker 实现异步操作 Mysql
  • SegmentFault 社区上线小程序开发频道，助力小程序开发者生态
  • vue.js框架原理浅析
  • Webpack 4x 之路 （ 四 ）
  • 从@property说起（二）当我们写下@property (nonatomic, weak) id obj时，我们究竟写了什么...
  • 基于Javascript， Springboot的管理系统报表查询页面代码设计
  • 技术胖1-4季视频复习— (看视频笔记)
  • 开源地图数据可视化库——mapnik
  • 快速体验 Sentinel 集群限流功能，只需简单几步
  • 聊聊flink的BlobWriter
  • 浅谈web中前端模板引擎的使用
  • 如何在GitHub上创建个人博客
  • nb
  • 国内开源镜像站点
  • #laravel 通过手动安装依赖PHPExcel#
  • $$$$GB2312-80区位编码表$$$$
  • $refs 、$nextTic、动态组件、name的使用
  • （M)unity2D敌人的创建、人物属性设置，遇敌掉血
  • （ros//EnvironmentVariables）ros环境变量
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • （附源码）springboot助农电商系统 毕业设计 081919
  • （附源码）ssm考试题库管理系统 毕业设计 069043
  • (三)uboot源码分析
  • (十六)一篇文章学会Java的常用API
  • (太强大了) - Linux 性能监控、测试、优化工具
  • （五）Python 垃圾回收机制
  • .NET 设计模式—简单工厂（Simple Factory Pattern）
  • .pings勒索病毒的威胁：如何应对.pings勒索病毒的突袭？
  • /var/log/cvslog 太大
  • @NoArgsConstructor和@AllArgsConstructor,@Builder
  • [20160902]rm -rf的惨案.txt