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实现导航条flash导航条
Jun 17 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
JS实现音乐导航特效
Jan 06 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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/12/05 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
es6的数字处理的方法(5个)
2017/03/16 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
小程序实现tab标签页
2020/11/16 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python 通过exifread读取照片信息
2020/12/24 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
How to spawning asynchronous work in J2EE
2016/08/29 面试题
回门宴新郎答谢词
2014/01/12 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Python基础知识之变量的详解
2021/04/14 Python
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA