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 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
理解javascript异步编程
Jan 27 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
js前端图片加载异常兜底方案
Jun 21 Javascript
React更新渲染原理深入分析
Dec 24 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判断变量的函数
2012/04/24 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP的几个常用加密函数
2016/02/03 PHP
常用PHP封装分页工具类
2017/01/14 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
租赁意向书范本
2014/04/01 职场文书
法制宣传月活动方案
2014/05/11 职场文书
搞笑车尾标语
2014/06/23 职场文书
学校工作推荐信范文
2014/07/11 职场文书
个人自我剖析材料
2014/09/30 职场文书
高三英语复习计划
2015/01/19 职场文书