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


Posted in Javascript onOctober 11, 2010

再次申明,插件问题比较多,后期一个个来解决,请不要恶言相向。希望各位多多提好的建议善言。
一. 分析表单验证的基本情况
在我们做web开发的过程中,会遇到各种各样的验证。归纳一下基本可以分为一下几类:
(1). 是否必填项 [这个是非常基本的]
(2). 输入参数中的范围校验
(3). 输入参数与另外一个控件值的比较
(4). 输入的参数正则表达式验证
二. 是否必填项验证
有如下几种情况:
(1) 输入框获得焦点提示
(2)输入框失去焦点验证错误提示
(3)输入框失去焦点验证正确提示
首先确定输入框是否是必填项,然后就是提示消息的现实位置。
根据以上几种情况确定如下几个参数:
required : 是否为必填项,true 和 false ,true 表示为必填项 (*)
onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)
onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)
onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)
tipId : 用于显示提示信息的控件id (*)
组合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"}
注意: 上面定义的一些规则,有些可能没有实现,在后期过程中逐渐完善。

/** 
* 检查输入框是否为必填项 
* 输入参数: 
* required : 是否为必填项,true 和 false ,true 表示为必填项 (*) 
* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 
* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* tipId : 用于显示提示信息的控件id (*) 
* 组合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"} 
*/ 
$.fn.extend({ 
checkRequired:function(inputArg){ 
if(inputArg.required){ 
if($(this).is("input") || $(this).is("textarea")){ 
//绑定获得焦点事件 
$(this).bind("focus",function(){ 
if(inputArg.onFocus!=undefined){ 
$("#" + inputArg.tipId).html(inputArg.onFocus); 
} 
}); 
//绑定失去焦点事件 
$(this).bind("blur",function(){ 
if($(this).val()!=undefined && $(this).val()!=""){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
}); 
} 
} 
} 
});

 使用效果和测试代码:

jQuery 表单验证扩展代码(一)  当获得焦点时候后面提示效果

jQuery 表单验证扩展代码(一)  当失去焦点没有输入提示效果

jQuery 表单验证扩展代码(一) 当输入文本信息之后提示成功效果

测试代码如下:

<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, 
onFocus:"这个为必填项", 
onBlur:"必须填写啊", 
onSucces:"恭喜,你输入了", 
tipId:"txtNameTip" 
}); 
}); 
</script>

三. 输入参数中的范围校验

相比上面的验证来说,这个稍微复杂了一些,因为有输入值的范围。校验做了如下区分:输入的数据类型为 字符串, 数字 ,时间

如果是字符串则比较字符串的长短,数字和时间比较大小。(时间目前没有完善)

因为比较范围所以定义一个区间范围,所以这里再添加两个属性,下限值和上限值。

输入参数列表:

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)

dataType : 数据类型参数(text,number,date)

min : 输入的最小值

max : 输入的最大值

tipId : 用于显示提示信息的控件id (*)

/** 
* 检查输入项的范围 
* 输入参数: 
* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 
* dataType : 数据类型参数(text,number,date) 
* min : 输入的最小值 
* max : 输入的最大值 
* tipId : 用于显示提示信息的控件id (*) 
* 
*/ 
$.fn.extend({ 
checkRange:function(inputArg){ 
if ($(this).is("input") || $(this).is("textarea")) { 
//获得焦点绑定 
$(this).bind("focus",function(){ 
if(inputArg.onFocus!=undefined){ 
$("#" + inputArg.tipId).html(inputArg.onFocus); 
} 
}); 
//失去焦点绑定 
$(this).bind("blur",function(){ 
if($(this).val()==undefined || $(this).val()==""){ 
$("#" + inputArg.tipId).html(inputArg.onEmpty); 
}else{ 
switch(inputArg.dataType){ 
case "text": 
if($(this).val().length>= parseInt(inputArg.min) && $(this).val().length< parseInt(inputArg.max)){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "number": 
if(!isNaN($(this).val())){ 
if(parseInt($(this).val())>parseInt(inputArg.min) && parseInt($(this).val())<parseInt(inputArg.max)){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
} 
break; 
case "date": 
break; 
} 
} 
}); 
} 
} 
});

输入项范围效果和测试代码

jQuery 表单验证扩展代码(一)  如果年龄约定为数字 

jQuery 表单验证扩展代码(一)  输入不在约定范围之内

jQuery 表单验证扩展代码(一)  验证成功 

$("#txtAge").checkRange({ 
onFocus:"年龄为数字", 
onEmpty:"不能为空啊", 
onSucces:"验证成功", 
onBlur:"验证失败,请认真输入", 
dataType:"number", 
min:"10", 
max:"100", 
tipId:"txtAgeTip" 
}); 
<p> 
<label>年龄:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span> 
</p>

四. 输入参数与另外一个控件值的比较

和上面的验证比较,不同的地方在于要指定比较控件的id

下面是输入参数:

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)

dataType : 数据类型参数(text,number,date)

comType : 比较的类型(=,>,>=,<,<=,!=)

tipId : 用于显示提示信息的控件id (*)

targetId : 比较的目标控件Id

/** 
* 控件值之间的比较 
* 输入参数: 
* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 
* dataType : 数据类型参数(text,number,date) 
* comType : 比较的类型(=,>,>=,<,<=,!=) 
* tipId : 用于显示提示信息的控件id (*) 
* targetId : 比较的目标控件Id 
*/ 
$.fn.extend({ 
checkCompare:function(inputArg){ 
if($(this).is("input") || $(this).is("textarea")){ 
//获得焦点绑定 
$(this).bind("focus",function(){ 
if(inputArg.onFocus!=undefined){ 
$("#" + inputArg.tipId).html(inputArg.onFocus); 
} 
}); 
//失去焦点绑定 
$(this).bind("blur",function(){ 
var targetValue=$("#"+inputArg.targetId).val(); 
if(targetValue!=undefined && targetValue!=null){ 
if($(this).val()!=undefined && $(this).val()!=""){ 
if(inputArg.dataType=="text"){ 
switch(inputArg.comType){ 
case "=": 
if(targetValue==$(this).val()){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "!=": 
if(targetValue!=$(this).val()){ 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
} 
}else if(inputArg.dataType=="number"){ 
if (isNaN(targetValue) == false && isNaN($(this).val()) == false) { 
switch (inputArg.comType) { 
case "=": 
if (targetValue == $(this).val()) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "!=": 
if (targetValue != $(this).val()) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case ">": 
if ($(this).val() > targetValue) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case ">=": 
if ($(this).val() >= targetValue) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "<": 
if ($(this).val() < targetValue) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
case "<=": 
if ($(this).val() <= targetValue) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
} 
else { 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
break; 
} 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
}else if(inputArg.dataType=="date"){ 
} 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onEmpty); 
} 
} 
}); 
} 
} 
});

控件值之间的比较效果和测试代码

jQuery 表单验证扩展代码(一)  
效果图1

jQuery 表单验证扩展代码(一)      
效果图2

jQuery 表单验证扩展代码(一)          
效果图3

$("#txtPass2").checkCompare({ 
onFocus:"和前面的比较", 
onEmpty:"输入的不能为空", 
onSucces:"验证成功", 
onBlur:"验证失败", 
dataType:"number", 
comType:">=", 
tipId:"txtPass2Tip", 
targetId:"txtPass1" 
}); <p> 
<label>密码1:</label><textarea id="txtPass1"></textarea><span id="txtPass1Tip"></span> 
</p> 
<p> 
<label>密码2:</label><textarea id="txtPass2"></textarea><span id="txtPass2Tip"></span> 
</p>

五. 输入的参数正则表达式验证

这个验证相对比较简单,因为使用正则表达式,无需自己去思考输入的情况。只需要引入一个正则表达式就可以了

下面是输入参数:

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)

regExp : 正则表达式

tipId : 用于显示提示信息的控件id (*)

jQuery正则表达式的验证

/** 
* 正则表达式的验证 
* 输入参数: 
* onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onEmpty : 输入项为空文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@) 
* onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示) 
* regExp : 正则表达式 
* tipId : 用于显示提示信息的控件id (*) 
*/ $.fn.extend({ 
checkRegExp:function(inputArg){ 
if ($(this).is("input") || $(this).is("textarea")) { 
//获得焦点绑定 
$(this).bind("focus", function(){ 
if (inputArg.onFocus != undefined) { 
$("#" + inputArg.tipId).html(inputArg.onFocus); 
} 
}); 
//获得失去焦点事件 
$(this).bind("blur",function(){ 
if($(this).val()!=undefined && $(this).val()!=""){ 
if ($(this).val().match(inputArg.regExp) == null) { 
$("#" + inputArg.tipId).html(inputArg.onSucces); 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onBlur); 
} 
}else{ 
$("#" + inputArg.tipId).html(inputArg.onEmpty); 
} 
}); 
} 
} 
});

正则表达式效果和测试代码

jQuery 表单验证扩展代码(一)  
输入非数字

jQuery 表单验证扩展代码(一)  
 输入数字

$("#txtAge").checkRegExp({ 
onFocus:"年龄必须为数字", 
onEmpty:"输入的不能为空", 
onSucces:"验证成功", 
onBlur:"验证失败", 
regExp:/\D/, 
tipId:"txtAgeTip" 
}); 
<label>年龄:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span>

这是验证插件的一个基本雏形,后期不断跟新..........
Javascript 相关文章推荐
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
基于iview的router常用控制方式
May 30 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
AlertBox 弹出层信息提示框效果实现步骤
Oct 11 #Javascript
基于jQuery的实现简单的分页控件
Oct 10 #Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 #Javascript
Tips 带三角可关闭的文字提示
Oct 06 #Javascript
从零开始学习jQuery (二) 万能的选择器
Oct 01 #Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 #Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 #Javascript
You might like
PHP系统流量分析的程序
2006/10/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
详解Python的Django框架中的模版相关知识
2015/07/15 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
用python对oracle进行简单性能测试
2020/12/05 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
澳大利亚相机之家:Camera House
2017/11/30 全球购物
德国50岁以上交友网站:Lebensfreunde
2020/03/18 全球购物
高中生期末评语大全
2014/01/28 职场文书
开学典礼决心书
2014/03/11 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2015年元旦标语大全
2014/12/09 职场文书
信访维稳承诺书
2015/05/04 职场文书
寻找成龙观后感
2015/06/12 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android