首页
所有分类
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 asp.net 用json格式返回自定义对象
Apr 07 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
JavaScript函数详解
Feb 27 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
JS将滑动门改为选项卡（需鼠标点击）的实现方法
Sep 27 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
js+html获取系统当前时间
Nov 10 Javascript
Vue内部渲染视图的方法
Sep 02 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 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
ICF-903L(1) 74HC4066(1) YB-230(1) AGC(1) BCLer(1) 大话西游(1) 死亡搁浅(1) 原神(1) FS1016(1) AN-LP1(1)
You might like
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
jQuery事件用法详解
2016/10/06 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
详解JS构造函数中this和return
2017/09/16 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
JsChart组件使用详解
2018/03/04 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python实现二维有序数组查找的方法
2016/04/27 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
澳大利亚婴儿喂养品牌：Cherub Baby
2018/11/01 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
网站推广策划方案
2014/06/04 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL