jQuery 表单验证扩展代码_jquery_脚本之家

一. 存在的问题
在上篇中我已经提到过,验证提示打算用文本和样式两种方式来显示提示消息,这两种提示都只能单独使用,于是新的跟新内容做了一些扩展,使得两者可以共用。前一篇写的是否必填项这个验证只是正对
Text, TextArea 这两个表单元素,在新的扩展中同时也支持了radio,checkbox
两个元素。 二. 验证参数的设计
基于多重选择的考虑,扩展了一些有必要的参数,参数列表如下: required:
是否为必填项,true 和 false ,true 表示为必填项 onFocusText:
获得焦点的文字提示 onFocusClass: 获得焦点之后的样式 onErrorText:
验证错误的文本提示 onErrorClass: 验证错误的样式提示 onSuccessText:
验证成功文本提示 onSuccessClass: 验证成功的样式提示 targetId:
提示信息元素的id号
相比之前的做了一些修改,看过之前的文章会知道,我将样式和文本单独分离了,之前是混合在一起的。这也是作为扩展需要的一步考虑。然后变更了错误消息提示参数的名称。
三. 源码解析 jQuery 表单验证扩展之验证是否为必填项源码 复制代码 代码如下: $.fn.extend({
checkRequired:function{ //只有必填项才去验证,非必填项无意义 if{
//验证是否是输入框表单 if || ${ //获得焦点提示 $.bind{
//如果文本存在则不替换提示样式 if != undefined && $ { //显示正确信息文本
addText(inputArg.targetId,inputArg.onSuccessText); //切换样式
addClass(inputArg.targetId,inputArg.onSuccessClass); }else{
//显示获得焦点文本 addText(inputArg.targetId,inputArg.onFocusText);
//切换样式 addClass(inputArg.targetId,inputArg.onFocusClass); } });
//失去焦点提示 $.bind{ if==”radio” || $==”checkbox”){ var name=$; var
items=$(‘input[@name=””+name+””][checked]’); if{ addMessage; }else{
addMessage; } }else{ if!=undefined && ${ addMessage; }else{ addMessage;
} } }); } } } }); /** * 根据输入框的不同类型来判断 * @param {Object}
flag * @param {Object} inputArg */ function addMessage{ if{
//显示正确信息文本 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{ if{
text=””; } $.html; } /** * 切换样式 * @param {Object} targetId
目标控件id * @param {Object} className 显示的样式名称 */ function
addClass{ if(className!=undefined && className!=””){
$.removeClass.addClass; } } 用过jQuery
的都知道,jQuery是一个非常易于扩展的框架,它里面提供了扩展核心库的函数。本表单验证都是基于这个扩展函数来延伸的。
这里还考虑到了一些代码复用性的问题,将共同代码分离,这使得最终的代码大大减少了。
jQuery 表单验证扩展 必填项共同方法提取 复制代码 代码如下: /** *
根据输入框的不同类型来判断 * @param {Object} flag * @param {Object}
inputArg */ function addMessage{ if{ //显示正确信息文本
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{ if{
text=””; } $.html; } /** * 切换样式 * @param {Object} targetId
目标控件id * @param {Object} className 显示的样式名称 */ function
addClass{ if(className!=undefined && className!=””){
$.removeClass.addClass; } } /code] 每次不同的验证都会涉及到
添加文本消息,表单元素的不同添加文本消息,和样式的替换,于是分离出来上面三个公用方法。
在源码中 if==”radio” || $==”checkbox”)
这句是比较重要的一句,因为它涉及到了验证元素的扩展。 四. 使用例子

文本框测试样图

输入文本框获得焦点提示

输入文本框失去焦点错误提示

输入文本验证正确提示

radio 测试样图

checkbox 测试样图

checkbox 验证失败提示

checkbox 验证成功提示测试代码 [code]

姓名:

性别: 男 女

爱好: aa bb aa bb

这里不多说了,文章持续更新中!有问题进一步做修改中…….

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图