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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
React Router基础使用
Jan 17 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 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
You might like
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
js调用后台servlet方法实例
2013/06/09 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
angularJS 入门基础
2015/02/09 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
深入理解python try异常处理机制
2016/06/01 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python和JavaScript哪个容易上手
2020/06/23 Python
python re的findall和finditer的区别详解
2020/11/15 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
副总经理工作职责
2013/11/28 职场文书
总经理职责
2013/12/22 职场文书
挑战杯创业计划书的写作指南
2014/01/07 职场文书
婚纱店策划方案
2014/05/22 职场文书
负责人任命书范本
2014/06/04 职场文书
教师见习报告范文
2014/11/03 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
2015年路政工作总结
2015/05/22 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
倡议书怎么写?
2019/04/11 职场文书