首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery 表单验证扩展(四)

Posted in Javascript onOctober 20, 2010

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

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

(二). 参数介绍
onFocusText:获得焦点提示文字
onFocusClass:获得焦点样式
onEmptyText:当输入项为空显示文字
onEmptyClass:当输入项为空显示样式
onErrorText:验证错误显示文字
onErrorClass:输入验证错误显示样式
onSuccessText:输入成功显示文本
onSuccessClass:输入成功显示样式
comType:比较类型
dataType:输入比较内容的数据类型
dataType:输入比较内容的数据类型
comId:相比较的目标控件ID
targetId:用于显示提示信息的控件id

这里的比较类型分为如下几种: “==” “！=” “>” “>=” “<” <=“”
比较的数据类型分为如下几种: "text" "number" "date"
这里对date 数据类型还没有做任何处理，在后期过程中更新

(三). 控件值之间的比较源码解析
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 两种元素。这个大大简化了验证的复杂度。这段代码相对之间也有所精简，这里的精简不是对功能的减少，而是对代码的重构，方法的提取。这里面用到了上几篇文章的功用方法，用于添加文本和修改样式信息。
添加文本和样式信息 功用代码解析 
/** 
* 根据输入框的不同类型来判断 
* @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 表单验证扩展(四) 失去焦点验证成功

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

<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>

数字之间的验证

jQuery 表单验证扩展(四) 数字验证获得焦点提示作用

jQuery 表单验证扩展(四) 数字验证失去焦点验证失败

jQuery 表单验证扩展(四) 数字验证失去焦点验证成功

<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>

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

jQuery 表单验证扩展(四)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
switchery按钮的使用方法
Dec 18 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 Javascript
jQuery 表单验证扩展(三)
Oct 20 #Javascript
jQuery 表单验证扩展代码(二)
Oct 20 #Javascript
事件模型在各浏览器中存在差异
Oct 20 #Javascript
自写简单JS判断是否已经弹出页面
Oct 20 #Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 #Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 #Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 #Javascript
muduo(1) 增删改查(2) 优化(1) 存储过程(3) instantclient(1) ICF-5900W(2) TcpServer(1) 忘记密码(1) B+树(2) pt-archiver(1)
You might like
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
php投票系统之增加与删除投票（管理员篇）
2016/07/01 PHP
可以将word转成html的js代码
2010/04/11 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
python有证书的加密解密实现方法
2014/11/19 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python实现简单颜色识别程序
2020/02/19 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
慕尼黑山地运动、户外服装和体育用品专家：Sporthaus Schuster
2019/08/27 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
教师党员学习群众路线心得体会
2014/11/04 职场文书
材料员岗位职责
2015/02/10 职场文书