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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
微信小程序 网络通信实现详解
Jul 23 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
JS实现京东商品分类侧边栏
Dec 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安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[04:30]显微镜下的DOTA2第五期——拉比克
2013/09/26 DOTA
十个Python程序员易犯的错误
2015/12/15 Python
Python模拟登陆实现代码
2017/06/14 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
详解python和matlab的优势与区别
2019/06/28 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
幼儿园教学随笔感言
2014/02/23 职场文书
《狼》教学反思
2014/03/02 职场文书
yy生日主持词
2014/03/20 职场文书
努力学习演讲稿
2014/05/10 职场文书
八一建军节演讲稿
2014/09/10 职场文书
计算机教师工作总结
2015/08/13 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
安全生产学习心得体会
2016/01/18 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python