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 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
js实现弹窗猜数字游戏
Nov 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
javascript读写json示例
2014/04/11 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
python pandas修改列属性的方法详解
2018/06/09 Python
对python Tkinter Text的用法详解
2018/10/11 Python
python创建学生管理系统
2019/11/22 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
银行出纳岗位职责
2013/11/25 职场文书
春节联欢会主持词
2014/03/24 职场文书
会计个人实习计划书
2014/08/15 职场文书
社区党员公开承诺书
2014/08/30 职场文书
资产运营委托书范本
2014/10/16 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
单位介绍信格式
2015/01/31 职场文书
公司停电通知
2015/04/15 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python