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和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
JS如何把字符串转换成json
Feb 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
PHP5中MVC结构学习
2006/10/09 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
传智播客学习之java 反射
2009/11/22 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
vue如何截取字符串
2019/05/06 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
详解vue 组件注册
2020/11/20 Vue.js
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
家长会主持词开场白
2014/03/18 职场文书
2014年营业员工作总结
2014/11/18 职场文书
法人代表证明书范本
2015/06/18 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA