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冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
js制作简易年历完整实例
Jan 28 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
点击进行复制的JS代码实例
2013/08/23 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[04:42]5分钟带你了解什么是DOTA2(第一期)
2017/02/07 DOTA
Win8下python3.5.1安装教程
2020/07/29 Python
python绘制热力图heatmap
2020/03/23 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
校友会欢迎辞
2014/01/13 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
2014年网管工作总结
2014/12/11 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
Vue vee-validate插件的简单使用
2021/06/22 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js