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 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
Javascript中this的用法详解
Sep 22 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
JS变量及其作用域
Mar 29 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
杏林同学录(六)
2006/10/09 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
vue实现评价星星功能
2020/06/30 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python实现证件照换底功能
2019/08/20 Python
Python count函数使用方法实例解析
2020/03/23 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
巴西最大的运动品牌:Olympikus
2020/07/14 全球购物
优秀应届毕业生推荐信
2014/02/18 职场文书
邓小平理论心得体会
2014/09/09 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
先进典型发言材料
2014/12/30 职场文书
元宵节寄语大全
2015/02/27 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers