jQuery 表单验证扩展代码(二)


Posted in Javascript onOctober 20, 2010

一. 存在的问题
在上篇中我已经提到过,验证提示打算用文本和样式两种方式来显示提示消息,这两种提示都只能单独使用,于是新的跟新内容做了一些扩展,使得两者可以共用。前一篇写的是否必填项这个验证只是正对 Text, TextArea 这两个表单元素,在新的扩展中同时也支持了radio,checkbox 两个元素。

二. 验证参数的设计
基于多重选择的考虑,扩展了一些有必要的参数,参数列表如下:
required: 是否为必填项,true 和 false ,true 表示为必填项 (*)
onFocusText: 获得焦点的文字提示
onFocusClass: 获得焦点之后的样式
onErrorText: 验证错误的文本提示
onErrorClass: 验证错误的样式提示
onSuccessText: 验证成功文本提示
onSuccessClass: 验证成功的样式提示
targetId: 提示信息元素的id号

相比之前的做了一些修改,看过之前的文章会知道,我将样式和文本单独分离了,之前是混合在一起的。这也是作为扩展需要的一步考虑。然后变更了错误消息提示参数的名称。

三. 源码解析
jQuery 表单验证扩展之验证是否为必填项源码

$.fn.extend({ 
checkRequired:function(inputArg){ 
//只有必填项才去验证,非必填项无意义 
if(inputArg.required){ 
//验证是否是输入框表单 
if($(this).is("input") || $(this).is("textarea")){ 
//获得焦点提示 
$(this).bind("focus",function(){ 
//如果文本存在则不替换提示样式 
if ($(this).val() != undefined && $(this).val() != "") { 
//显示正确信息文本 
addText(inputArg.targetId,inputArg.onSuccessText); 
//切换样式 
addClass(inputArg.targetId,inputArg.onSuccessClass); 
}else{ 
//显示获得焦点文本 
addText(inputArg.targetId,inputArg.onFocusText); 
//切换样式 
addClass(inputArg.targetId,inputArg.onFocusClass); 
} 
}); 
//失去焦点提示 
$(this).bind("blur",function(){ 
if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){ 
var name=$(this).attr("name"); 
var items=$('input[@name=""+name+""][checked]'); 
if(items.length>0){ 
addMessage(true,inputArg); 
}else{ 
addMessage(false,inputArg); 
} 
}else{ 
if($(this).val()!=undefined && $(this).val()!=""){ 
addMessage(true,inputArg); 
}else{ 
addMessage(false,inputArg); 
} 
} 
}); 
} 
} 
} 
}); 
/** 
* 根据输入框的不同类型来判断 
* @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 表单验证扩展 必填项共同方法提取
/** 
* 根据输入框的不同类型来判断 
* @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); 
} 
} 
/code] 
每次不同的验证都会涉及到 添加文本消息,表单元素的不同添加文本消息,和样式的替换,于是分离出来上面三个公用方法。 
在源码中 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox") 这句是比较重要的一句,因为它涉及到了验证元素的扩展。 四. 使用例子 

文本框测试样图
 输入文本框获得焦点提示
 输入文本框失去焦点错误提示
 输入文本验证正确提示
 
radio 测试样图
  
checkbox 测试样图
  checkbox 验证失败提示
 checkbox 验证成功提示
测试代码 
[code] 
<script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script> 
<script language="JavaScript" type="text/javascript"> 
$(document).ready(function(){ 
$("#txtName").checkRequired({ 
required:true, 
onFocusText:"必填项", 
onFocusClass:"notice", 
onErrorText:"错误提示", 
onErrorClass:"error", 
onSuccessClass:"correct", 
targetId:"txtNameTip" 
}); 
$("#rdbMan").checkRequired({ 
required:true, 
onFocusText:"必填项", 
onFocusClass:"notice", 
onErrorText:"错误提示", 
onErrorClass:"error", 
onSuccessClass:"correct", 
targetId:"txtSexTip" 
}); 
$("#rdbWoman").checkRequired({ 
required:true, 
onFocusText:"必填项", 
onFocusClass:"notice", 
onErrorText:"错误提示", 
onErrorClass:"error", 
onSuccessClass:"correct", 
targetId:"txtSexTip" 
}); 

$("#rdbMan1,#rdbWoman2,#rdbMan3,#rdbWoman4").checkRequired({ 
required:true, 
onFocusText:"必填项", 
onFocusClass:"notice", 
onErrorText:"错误提示", 
onErrorClass:"error", 
onSuccessClass:"correct", 
targetId:"txthobbyTip" 
}); 
}); 
</script> 

<p> 
<label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span> 
</p> 
<p> 
<label>性别:</label> 
<span> 
<input id="rdbMan" type="radio" name="sex" value="男" />男     
<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     
<input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb    
<input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa     
<input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb    
</span> 
<span id="txthobbyTip"></span> 
</p>

这里不多说了,文章持续更新中!有问题进一步做修改中.......
Javascript 相关文章推荐
javascript 45种缓动效果 非常酷
Jun 28 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
extjs render 用法介绍
Sep 11 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
JavaScript 中的 this 工作原理
Jun 20 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
koa-passport实现本地验证的方法示例
Feb 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
关于javascript中this关键字(翻译+自我理解)
Oct 20 #Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 #Javascript
You might like
PHP浮点数的一个常见问题
2016/03/10 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
2013/12/23 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
vue二级路由设置方法
2018/02/09 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
python通过yield实现数组全排列的方法
2015/03/18 Python
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python2中的raw_input() 与 input()
2015/06/12 Python
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
《小池塘》教学反思
2014/02/28 职场文书
五一劳动节活动记录
2014/03/23 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
中学图书馆工作总结
2015/08/11 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python