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

输入的数字不满足范围

选择超过数量

Untitled Document

爱好: aa bb aa bb

获得焦点提示问题

当不输入文本的时候验证

验证成功. 验证测试代码 复制代码
代码如下:

对于select 多项选择

输入的字符串满足当前要求提示

在看这篇文章之前,
可以看看前两篇文章,表单验证输入范围验证是在原有的基础上改写的。 .
输入范围验证存在问题

在第二篇上提到的问题,在原有的验证中也存在相同的问题。当然在这次改写中也解决了一些这些问题。同时也添加了对radio,checkbox,select
元素的验证。当然对于时间的验证仍没有解决,后续过程中会继续补充! .
验证参数的设计
onEmptyText: 当输入内容为空的时候显示文本 onEmptyClass:
当输入内容为空的时候显示样式 onSuccessText: 当验证成功的时候显示的文本
onSuccessClass: 当验证成功的时候显示的样式
onErrorText:当验证失败的时候显示的文本
onErrorClass:当验证失败的时候显示的样式 onFocusText:
当获得焦点的时候显示的文本 onFocusClass:当获得焦点的时候显示的样式
dataType:输入的数据类型 min:输入的最小值 max:输入的最大值
targetId:显示提示消息的元素id
改写的部分就是将提示性文字和样式都单独隔离出来,可以更好灵活的操作表单验证!
改写的文章支持text,number,date 三种
数据形式,而且在radio,checkbox,select的验证也有更新。 radio,checkbox
,select 验证只是验证是否选中,而且这里的select 对于blur
事件并不敏感,所以这里采用的change事件来验证比较好。 .
验证范围源码解析
jQuery检查输入项的范围 源码解析 /** * onEmptyText:
当输入内容为空的时候显示文本 * onEmptyClass:
当输入内容为空的时候显示样式 * onSuccessText:
当验证成功的时候显示的文本 * onSuccessClass: 当验证成功的时候显示的样式
* onErrorText:当验证失败的时候显示的文本 *
onErrorClass:当验证失败的时候显示的样式 * onFocusText:
当获得焦点的时候显示的文本 * onFocusClass:当获得焦点的时候显示的样式 *
dataType:输入的数据类型 * min:输入的最小值 * max:输入的最大值 *
targetId:显示提示消息的元素id * @param {Object} inputArg */
$.fn.extend({ checkRange:function{ //绑定焦点事件 $.bind{ var flag=true;
if || ${ if==”radio” || $==”checkbox”){ var name=$; var
items=$(‘input[@name=””+name+””][checked]’); if{ flag=false; }
}else{ if!=undefined && ${ flag=false; } } }else{ //select 需要改进
select没有focus事件,应该改为change事件 } if { //显示获得焦点文本
addText(inputArg.targetId, inputArg.onFocusText); //切换样式
addClass(inputArg.targetId, inputArg.onFocusClass); } });
//绑定失去焦点事件 $.bind{ var flag=false; if || ${ if==”radio” ||
$==”checkbox”){ var name=$; var
items=$(‘input[@name=””+name+””][checked]’); if(items!=undefined &&
items.length>=inputArg.min && items.length= inputArg.max){
flag=false; }else{ flag=true; } break; case “number”: if { flag = false;
} else { if (value < inputArg.min || value >= inputArg.max) { flag
= false; } else { flag = true; } } break; case “date”: break; } } }
}else{ //select } if{ //显示获得焦点文本 addText(inputArg.targetId,
inputArg.onSuccessText); //切换样式 addClass(inputArg.targetId,
inputArg.onSuccessClass); }else{ //显示获得焦点文本
addText(inputArg.targetId, inputArg.onErrorText); //切换样式
addClass(inputArg.targetId, inputArg.onErrorClass); } }); //select
选择框选择事件 if { $.bind{ var items=$.find; if(items!=undefined &&
items.length>=inputArg.min && items.length. 提取的共同代码解析
第二篇中的公用方法 /** * 根据输入框的不同类型来判断 * @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; } } 这段代码主要主要用于添加文本提示和样式问题。
对于select元素的验证代码 //select 选择框选择事件 if { $.bind{ var
items=$.find; if(items!=undefined && items.length>=inputArg.min &&
items.length. 验证使用例子

对于checkbox的验证

验证成功

密码2:

密码1:

文本框输入验证

性别: 男 女

选择数量过多

年龄:

地区: 00000 11111 22222 33333 44444

以上是测试的部分代码 ,不过基本可以说明这个方法的的使用方式。
这里不多写了,后续不断更新……

描述:

选择满足数据

姓名:

当输入的内容长度不符

checkbox组其中之一获得焦点

对于数字的验证

发表评论

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

网站地图xml地图