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>

文章内容不想做过多的解释了,此文非常简单,相对于前面几篇文章来说。表单验证扩展不断更新中,后续期待............
Javascript 相关文章推荐
小型js框架veryide.librar源代码
Mar 05 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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
You might like
用php实现选择排序的解决方法
2013/05/04 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
Thinkphp5框架使用validate实现验证功能的方法
2019/08/27 PHP
laravel请求参数校验方法
2019/10/10 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
解读Django框架中的低层次缓存API
2015/07/24 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python调用百度语音REST API
2018/08/30 Python
Python API自动化框架总结
2019/11/12 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
护士自我介绍信
2014/01/13 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
司考复习计划
2015/01/19 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python