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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
浅析js封装和作用域
Jul 09 Javascript
关于延迟加载JavaScript
May 05 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
使用vue实现多规格选择实例(SKU)
Aug 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
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP 实用代码收集
2010/01/22 PHP
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
CodeIgniter中使用Smarty3基本配置
2015/06/29 PHP
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
2017/01/23 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
jQuery操作css样式
2017/05/15 jQuery
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Opencv求取连通区域重心实例
2020/06/04 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
文明寝室标语
2014/06/13 职场文书
应届生自荐书
2014/06/23 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS