jQuery textarea的长度进行验证

2016-02-19 16:00 171 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的jQuery textarea的长度进行验证懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

扩展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值进行操作。

来源:http://www.tulaoshi.com/n/20160219/1610870.html

延伸阅读
标签: Web开发
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录。 先贴一个国内某大公司的代码: 代码如下: script type="text/javascript" function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密...
标签: Web开发
打包下载   代码如下: /* Jquery 表单验证插件 janchie 2010.1 janchie@163.com 1.01版 */ (function($){ $.fn.extend({ valid:function(){ if( ! $(this).is("form") ) return; //获取参数 var items = $.isArray(arguments[0]) ? arguments[0] : [], isBindSubmit = typeof arguments[1] ==="boolean" ? arguments[1] :...
标签: Web开发
ASP.NET提供了丰富的数据验证控件,但这个验证功能都必须运用在服务器控件中;在复合验证数据时使用也不是很方便(虽然拖放控件很方便,但拖放数增多和设置相关属性就变得很麻烦的事情)。为了更方便灵活地实现验证功能,于是采用了JQuery编写了一个简单验证组件,在使用时只需要简单的描述一下验证规则,并不需要写一句JavaScript就可以实现具...
标签: 生活常识
12306如何进行手机双向验证   12306如何进行手机双向验证 不少用户发现,近期在登录12306官方网站的时候会弹出提示要求进行手机双向验证。首次购票三日内验证之前,用户需要进行双向验证,否则将不能进行网上购票。通过验证之后,如果你忘记了登录信息可以直接用手机号码登录,并且还会防止身份信息被抢注。 12306如何...
标签: Web开发
messages_cn.js !--验证国际化,中文-- (不引用messages_cn.js是英文的提示,用了是中文) 代码如下: required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a va...

经验教程

180

收藏

47
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部