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 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 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
php数组总结篇(一)
2008/09/30 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
python返回昨天日期的方法
2015/05/13 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
简单了解python模块概念
2018/01/11 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
pandas实现选取特定索引的行
2018/04/20 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
一份婚庆公司创业计划书
2014/01/11 职场文书
防汛工作情况汇报
2014/10/28 职场文书
武当山导游词
2015/02/03 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL