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 相关文章推荐
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
js去除浏览器默认底图的方法
2015/06/08 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
javascript中如何判断类型汇总
2019/05/14 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python3.4解释器用法简单示例
2019/03/22 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
一套软件测试笔试题
2014/07/25 面试题
Java面试笔试题大全
2016/11/23 面试题
我的求职计划书
2014/01/10 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
酒会开场白大全
2015/06/01 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python