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 对Cookie 操作的封装小结
Dec 31 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
javascript内存管理详细解析
Nov 11 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 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实现打包zip并下载功能
2018/06/12 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
总结一些js自定义的函数
2006/08/05 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
javascript中 try catch用法
2015/08/16 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现计算倒数的方法
2015/07/11 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
社区母亲节活动记录
2014/03/06 职场文书
交通安全寄语大全
2014/04/08 职场文书
保护环境建议书300字
2014/05/13 职场文书
质量标语大全
2014/06/12 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
国家助学金感谢信
2015/01/21 职场文书
明确岗位职责
2015/02/14 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Python自动化实战之接口请求的实现
2022/05/30 Python