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中实现命名空间
Nov 23 Javascript
js 编程笔记 无名函数
Jun 28 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
jQuery is()函数用法3例
May 06 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
js实现简单五子棋游戏
May 28 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微信高级接口调用方法(自定义菜单接口、客服接口、二维码)
2016/11/28 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
javascript数组去重小结
2016/03/07 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
react-router中的属性详解
2017/06/01 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
生日派对邀请函
2014/01/13 职场文书
个人党性剖析材料
2014/02/03 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers