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动画浅析
Aug 30 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 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
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
2014过年倒计时示例
2014/01/31 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
JointJS JavaScript流程图绘制框架解析
2019/08/15 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
如何利用find命令查找文件
2016/11/18 面试题
应届生高等护理求职信
2013/10/12 职场文书
毕业生自荐信的主要内容
2013/10/29 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
大学自我评价
2014/02/12 职场文书
六一节目主持词
2014/04/01 职场文书
生活部的活动方案
2014/08/19 职场文书
2014年外联部工作总结
2014/11/17 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
护士年终个人总结
2015/02/13 职场文书