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 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
Python编程实现使用线性回归预测数据
2017/12/07 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
python 批量将中文名转换为拼音
2021/02/07 Python
htnl5利用svg页面高斯模糊的方法
2018/07/20 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
文艺晚会主持词
2014/03/24 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
教代会开幕词
2015/01/28 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
高中开学感言
2015/08/01 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Python测试框架pytest核心库pluggy详解
2022/08/05 Golang