jQuery对textarea的长度进行验证

  

Textarea 控件不能使用form validate.js 进行判断.

 

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

20090715更新：

考虑到有时对不同的长度的提示语不同，在default中增加message：

//显示错误提示 function showLengthError(errorMsg) { var msg = $("<div></div>").addClass("lenError"); $(msg).text(errorMsg); return msg; } //进行textarea长度校验 jQuery.fn.checkLength = function(parameters) { defaults = { min: 0 , max: 5 , message: { minError: "请填写内容" , maxError: "最大长度超出限制了" } } jQuery.extend(defaults, parameters); // 当前textarea 的值 var taValue = $(this).val(); var len = taValue.length; if (len >= defaults.max) { $(".lenError").remove(); $(this).parent().append(showLengthError(defaults.message.maxError)).show(); window.setTimeout(function() { $(".lenError").hide(); }, 6000); return false; } else if (len <= defaults.min) { $(".lenError").remove(); $(this).parent().append(showLengthError(defaults.message.minError)).show(); window.setTimeout(function() { $(".lenError").hide(); }, 6000); return false; } else { return true; } //todo: 当键盘输入在正确范围的时候，消除提示 }

使用的时候，在checkLength的基础上，增加message即可。