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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
js实现抽奖功能
Nov 24 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
js 实现css风格选择器(压缩后2KB)
2012/01/12 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python实现人脸识别代码
2017/11/08 Python
Django model反向关联名称的方法
2018/12/15 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python如何求100以内的素数
2020/05/27 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Python实现像awk一样分割字符串
2020/09/15 Python
硕士研究生自我鉴定
2013/11/08 职场文书
先进集体事迹材料
2014/02/17 职场文书
检讨书模板
2015/01/29 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书