jQuery 表单验证扩展(五)

简介: 大概在一个月之前,自己尝试着写一个jQuery的表单验证插件,当初的目的并不是为了让这个插件流行起来,只是为了自己学习的需要。由于工作的问题,这个问题一直处于停留的状态。前些天报名参加了那个什么博客大赛,最近未写一篇博客,当然本文也不是了参加什么博客大赛而写,只是作为自己学习的积累。

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

  文章回顾:

jQuery 表单验证扩展(一) 

jQuery 表单验证扩展(二) 

jQuery 表单验证扩展(三) 

jQuery 表单验证扩展(四) 

 

(一) . 存在问题分析

在第一篇文章中粗略的写到了表单验证中的正则表达式验证,这篇文章只是对那个部分的加强。 本文添加了样式提示和文本提示共存,和前面三篇的功能点基本相同,同时此文章中也添加了自定义正则表达式和内置正则表达式共存的问题。

 

(二). 参数介绍 

onFocusText:获得焦点提示文字 

onFocusClass:获得焦点样式 

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

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

onErrorText:验证错误显示文字 

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

onSuccessText:输入成功显示文本 

onSuccessClass:输入成功显示样式

regularText: 匹配的正则表达式 

regularTarget:比较的目标正则表达(常用正则表达式) 

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

这里注意两个参数, regularText 这个用于自定义正则表达式,regularTarget 这个则用于使用内置的正则表达式,其余参数在前几篇文章中都有提到,这里不做过的的讲解。如果有不了解的可以参考前面几篇文章。

 

(三). 正则表达式验证源码解析

img_405b18b4b6584ae338e0f6ecaf736533.gif jQuery正则表达式验证 源码解析
/* *
 * onFocusText:获得焦点提示文字
 * onFocusClass:获得焦点样式
 * onEmptyText:当输入项为空显示文字
 * onEmptyClass:当输入项为空显示样式
 * onErrorText:验证错误显示文字
 * onErrorClass:输入验证错误显示样式
 * onSuccessText:输入成功显示文本
 * onSuccessClass:输入成功显示样式
 * regularText: 匹配的正则表达式
 * regularTarget:比较的目标正则表达(常用正则表达式)
 * targetId:用于显示提示信息的控件id
 * @param {Object} inputArg
 
*/
var  regulars = {
    checkNum:
/ \D / ,
    checkDecimal:
/ ^-?\d+(\.\d+)?$ / g,
    checkInteger:
/ ^[-+]?\d*$ / ,
    checkEmail:
/ [A-Za-z0-9_-]+[@](\S*)(net|com|cn|org|cc|tv|[0-9]{1,3})(\S*) / g,
    checkTelephone:
/ ^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$ /
};
$.fn.extend({
    checkRegExp:
function (inputArg){
        
if ($( this ).is( " input " ||  $( this ).is( " textarea " )){
            
if  ($( this ).attr( " type " !=   " radio "   &&  $( this ).attr( " type " !=   " checkbox " ) {
                
                
// 绑定获得焦点
                $( this ).bind( " focus " , function (){
                    
var  flag = false ;
                    
if ($( this ).val() == undefined  ||  $( this ).val() == "" ){
                        flag
= true ;
                    }
                    
if  (flag) {
                        
// 显示获得焦点文本
                        addText(inputArg.targetId, inputArg.onFocusText);
                        
// 切换样式
                        addClass(inputArg.targetId, inputArg.onFocusClass);
                    }
                });
                
                
// 失去焦点
                $( this ).bind( " blur " , function (){
                    
var  flag = false ;
                    
if ($( this ).val() == undefined  ||  $( this ).val() == "" ){
                        flag
= true ;
                    }
                    
if  (flag) {
                        
// 显示获得焦点文本
                        addText(inputArg.targetId, inputArg.onEmptyText);
                        
// 切换样式
                        addClass(inputArg.targetId, inputArg.onEmptyClass);
                    }
else {
                        
var  targetValue = false ;
                        
if (inputArg.regularTarget != undefined  &&  inputArg.regularTarget != "" ){
                            targetValue
=  regulars[inputArg.regularTarget].test($( this ).val());
                        }
else {
                            targetValue
=  inputArg.regularText.test($( this ).val());
                        }
                        
if (targetValue){
                            
// 显示获得焦点文本
                            addText(inputArg.targetId, inputArg.onSuccessText);
                            
// 切换样式
                            addClass(inputArg.targetId, inputArg.onSuccessClass);
                        }
else {
                            
// 显示获得焦点文本
                            addText(inputArg.targetId, inputArg.onErrorText);
                            
// 切换样式
                            addClass(inputArg.targetId, inputArg.onErrorClass);
                        }
                    }
                });
            }
        }
        
        
    }
});

 

  这段代码逻辑其实也不是很复杂,只是在做了一个正则表达式的验证问题。但是这里定义了一个regulars对象,里面封装了一些内置的正则表达式。当然这里只是一部分,我们可以添加若干个以及或者通用的正则表达式。

img_405b18b4b6584ae338e0f6ecaf736533.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( "          " + text);
}
/* *
 * 切换样式
 * @param {Object} targetId 目标控件id
 * @param {Object} className 显示的样式名称
 
*/
function  addClass(targetId,className){
    
if (className != undefined  &&  className != "" ){
        $(
" # " + targetId).removeClass();
        $(
" # " + targetId).addClass(className);
    }
}

 

上面这段代码,已经贴出来过很多次,这是这个插件中总体控制样式和文字显示的。为了显示代码的完整性,这里再次贴出来一次。

 

(四). 使用例子

img_405b18b4b6584ae338e0f6ecaf736533.gif 表单正则表达式验证测试例子
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01//EN "   " http://www.w3.org/TR/html4/strict.dtd " >
< 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 "  src = " jquery-1.3.2.min.js "  type = " text/javascript " >< / script>
         < script language = " JavaScript "  src = " jquery-extend-2.0.0.js "  type = " text/javascript " >< / script>
         < script language = " JavaScript "  type = " text/javascript " >
            $(document).ready(
function (){
                $(
" #txtName " ).checkRegExp({
                    onFocusText:
" 获得焦点,输入信息 " ,
                    onFocusClass:
" notice " ,
                    onEmptyText:
" 文本为空提示 " ,
                    onEmptyClass:
" notice " ,
                    onErrorText:
" 验证错误 " ,
                    onErrorClass:
" error " ,
                    onSuccessText:
" 验证正确 " ,
                    onSuccessClass:
" correct " ,
                    regularText:
"" ,
                    regularTarget:
" checkEmail " ,
                    targetId:
" txtNameTip "
                });
            });
        
< / script>
     < / head>
     < body >
        
< p >
            
< label > 姓名: < / label><input type="text" id="txtName" value="" / >< span id = " txtNameTip " >< / span>
         < / p>
         < p >
            
< label > 年龄: < / label><input type="text" id="txtAge" value="" / >< span id = " txtAgeTip " >< / span>
         < / p>
         < p >
            
< label > 描述: < / label><textarea id="txtArea">< / textarea >< span id = " txtAreaTip " >< / span>
         < / p>
         < p >
            
< label > 密码1: < / label><textarea id="txtPass1">< / textarea >< span id = " txtPass1Tip " >< / span>
         < / p>
         < p >
            
< label > 密码2: < / label><textarea id="txtPass2">< / textarea >< span id = " txtPass2Tip " >< / span>
         < / p>
         < p >
            
< label > 性别: < / label>
             < span >
                
< input id = " rdbMan "  type = " radio "  name = " sex "  value = " "   / >男 &nbsp;&nbsp;&nbsp;
                 < input id = " rdbWoman "  type = " radio "  name = " sex "  value = " "   / >女
             < / span>
             < span id = " txtSexTip " >< / span>
         < / p>
         < p >
            
< label > 爱好: < / label>
             < span >
                
< input id = " rdbMan1 "  type = " checkbox "  name = " hobby "  value = " hobby1 "   / >aa &nbsp;&nbsp;&nbsp;
                 < input id = " rdbWoman2 "  type = " checkbox "  name = " hobby "  value = " hobby2 "   / >bb&nbsp;&nbsp;&nbsp;
                 < input id = " rdbMan3 "  type = " checkbox "  name = " hobby "  value = " hobby3 "   / >aa &nbsp;&nbsp;&nbsp;
                 < input id = " rdbWoman4 "  type = " checkbox "  name = " hobby "  value = " hobby4 "   / >bb&nbsp;&nbsp;&nbsp;
             < / span>
             < span id = " txthobbyTip " >< / span>
         < / p>
     < / body>
< / html>

 

 

regularText:"",

regularTarget:"checkEmail", 上面只需要注意以上两个参数,这是控制使用内置正则表达式验证还是自定义的正则表达式验证。其余的验证都是参数和前面的验证都是一样的。这里不做过多的讲解。如果两者同时存在,默认使用内置的正则表达式验证。

 

文章写到这里,突然发现上传不了图片,演示效果图就看不了了。

插件仍然存在诸多问题,很多细节方面的问题都没有考虑到,插件持续更新中,文章也持续更新中,后续期待.... 

目录
打赏
0
0
0
0
5
分享
相关文章
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
85 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
如何在Vue 2或Vue 3项目中引入jQuery及其动画扩展库jQuery.easing,以实现更丰富的动画效果。
223 0
如何在Vue2.X/Vue3.X项目引入jQuery,以及增加jQuery.easing扩展?让你的动画效果更加丝滑!
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
413 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
59 0
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
55 4
jQuery会员中心安全修改表单特效
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
96 0
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
67 0
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
117 0
如何使用jQuery处理表单元素?底层原理是什么?
如何使用jQuery处理表单元素?底层原理是什么?
111 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等