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经典效果集锦
Jul 06 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
微信小程序实现弹框效果
May 26 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
python装饰器实例大详解
2017/10/25 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
PHP面试题集
2016/12/18 面试题
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
中学生在校期间的自我评价分享
2013/11/13 职场文书
保护母亲河倡议书
2014/04/14 职场文书
行政处罚听证告知书
2015/07/01 职场文书
关于践行三严三实的心得体会
2016/01/05 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
基于Python实现西西成语接龙小助手
2022/08/05 Golang