jQuery textarea的长度进行验证


Posted in Javascript onMay 06, 2009

扩展textarea 属性,结合jquery.validate.js,在提交表单同时,加上对textarea的长度进行验证。
1.jQuery 对textarea 长度进行验证的插件

//对textarea 长度进行验证 
jQuery.fn.checkLength = function(parameters) { 
defaults = { 
min: 0 
, max: 5 
} 
jQuery.extend(defaults, parameters); 
// 当前textarea 的值 
var taValue = $(this).val(); 
var len = taValue.length; 
if (len >= defaults.max) { 
$(this).parent().append(showLengthError("max")).show(); 
window.setTimeout(function() { 
$(".lenError").hide(); 
}, 5000); 
return false; 
} else if (len <= defaults.min) { 
$(this).parent().append(showLengthError("min")); 
window.setTimeout(function() { 
$(".lenError").hide(); 
}, 5000); 
return false; 
} else { 
return true; 
} 
//todo: 当键盘输入在正确范围的时候,消除提示 
}

注释:
1) 参数传递:
defaults = {
min: 0
, max: 5
}
分别用于用于接收textarea的最短和最大长度。
2) 返回值
true : 验证长度通过
false : 验证长度失败
2. 使用说明:
在页面添加js引用:
<script type="text/javascript" src="../../../scripts/jquery/jquery.textarea.js"></script>
示例:
在页面中
<textarea id="txtContent" rows="4" cols="40"></textarea>
<button id="chklen">Check Textarea Length</button>
当触发按钮事件的时候,我们就可以对textarea 的长度进行判断了。
$("#chklen").click(function(){ 
var bool = $("#txtContent").checkLength({ 
min : -1 
,max: 10 
}); 
if(bool){ 
alert(bool); 
} 
});

如果textarea是在form表单当中的,则在表单提交的同时,进行验证,条件满足的时候再进行提交。
如下示例:
// 判断 testarea 长度是否超出限制 
var ckContent = $("#txtContentIntro").checkLength({ 
min : -1 //不判断是否为空 
,max: 512 //最大长度512 
}); 
// 表单验证 
var b = $("#fcourseware").valid(); 
// 执行上传操作,上传成功后保存课件信息 
if (b && ckContent ) { 
// todo: submit form 
}

min和max两个参数均可以不传递值,默认最小长度0,最大长度10.如果textarea不为必填项,则min 值赋予 -1.
最后通过返回bool值进行操作。
Javascript 相关文章推荐
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
JS实现图片预加载无需等待
Dec 21 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
JS常见错误(Error)及处理方案详解
Jul 02 Javascript
JS 动态加载脚本的4种方法
May 05 #Javascript
JavaScript 字符编码规则
May 04 #Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 #Javascript
JavaScript 实现模态对话框 源代码大全
May 02 #Javascript
javascript document.referrer 用法
Apr 30 #Javascript
Ext 表单布局实例代码
Apr 30 #Javascript
js 方法实现返回多个数据的代码
Apr 30 #Javascript
You might like
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
js实现简单扫雷
2020/11/27 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
Python操作MySQL模拟银行转账
2018/03/12 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python实现简单银行管理系统
2019/10/25 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
历史专业个人求职信分享
2013/12/20 职场文书
新学期决心书
2014/03/11 职场文书
任命书模板
2014/06/04 职场文书
法学求职信
2014/06/22 职场文书
美术社团活动总结
2014/06/27 职场文书
基层党支部整改方案
2014/10/25 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
初中物理教学反思
2016/02/19 职场文书
学生安全责任协议书
2016/03/22 职场文书