jQuery textarea的長(zhǎng)度進(jìn)行驗(yàn)證
更新時(shí)間：2009年05月06日 02:37:59 作者：
Textarea 控件不能使用form validate.js 進(jìn)行判斷.
擴(kuò)展textarea 屬性，結(jié)合jquery.validate.js，在提交表單同時(shí)，加上對(duì)textarea的長(zhǎng)度進(jìn)行驗(yàn)證。
1.jQuery 對(duì)textarea 長(zhǎng)度進(jìn)行驗(yàn)證的插件
//對(duì)textarea 長(zhǎng)度進(jìn)行驗(yàn)證
jQuery.fn.checkLength = function(parameters) {
defaults = {
min: 0
, max: 5
}
jQuery.extend(defaults, parameters);
// 當(dāng)前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: 當(dāng)鍵盤(pán)輸入在正確范圍的時(shí)候，消除提示
}
注釋?zhuān)?/STRONG>
1) 參數(shù)傳遞：
defaults = {
min: 0
, max: 5
}
分別用于用于接收textarea的最短和最大長(zhǎng)度。
2) 返回值
true ： 驗(yàn)證長(zhǎng)度通過(guò)
false : 驗(yàn)證長(zhǎng)度失敗
2. 使用說(shuō)明：
在頁(yè)面添加js引用：
<script type="text/javascript" src="../../../scripts/jquery/jquery.textarea.js"></script>
示例：
在頁(yè)面中
<textarea id="txtContent" rows="4" cols="40"></textarea>
<button id="chklen">Check Textarea Length</button>
當(dāng)觸發(fā)按鈕事件的時(shí)候，我們就可以對(duì)textarea 的長(zhǎng)度進(jìn)行判斷了。
$("#chklen").click(function(){
var bool = $("#txtContent").checkLength({
min : -1
,max: 10
});
if(bool){
alert(bool);
}
});
如果textarea是在form表單當(dāng)中的，則在表單提交的同時(shí)，進(jìn)行驗(yàn)證，條件滿(mǎn)足的時(shí)候再進(jìn)行提交。
如下示例：
// 判斷 testarea 長(zhǎng)度是否超出限制
var ckContent = $("#txtContentIntro").checkLength({
min : -1 //不判斷是否為空
,max: 512 //最大長(zhǎng)度512
});
// 表單驗(yàn)證
var b = $("#fcourseware").valid();
// 執(zhí)行上傳操作，上傳成功后保存課件信息
if (b && ckContent ) {
// todo： submit form
}
min和max兩個(gè)參數(shù)均可以不傳遞值，默認(rèn)最小長(zhǎng)度0，最大長(zhǎng)度10.如果textarea不為必填項(xiàng)，則min 值賦予 -1.
最后通過(guò)返回bool值進(jìn)行操作。
1.jQuery 對(duì)textarea 長(zhǎng)度進(jìn)行驗(yàn)證的插件
復(fù)制代碼 代碼如下:
//對(duì)textarea 長(zhǎng)度進(jìn)行驗(yàn)證
jQuery.fn.checkLength = function(parameters) {
defaults = {
min: 0
, max: 5
}
jQuery.extend(defaults, parameters);
// 當(dāng)前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: 當(dāng)鍵盤(pán)輸入在正確范圍的時(shí)候，消除提示
}
注釋?zhuān)?/STRONG>
1) 參數(shù)傳遞：
defaults = {
min: 0
, max: 5
}
分別用于用于接收textarea的最短和最大長(zhǎng)度。
2) 返回值
true ： 驗(yàn)證長(zhǎng)度通過(guò)
false : 驗(yàn)證長(zhǎng)度失敗
2. 使用說(shuō)明：
在頁(yè)面添加js引用：
<script type="text/javascript" src="../../../scripts/jquery/jquery.textarea.js"></script>
示例：
在頁(yè)面中
<textarea id="txtContent" rows="4" cols="40"></textarea>
<button id="chklen">Check Textarea Length</button>
當(dāng)觸發(fā)按鈕事件的時(shí)候，我們就可以對(duì)textarea 的長(zhǎng)度進(jìn)行判斷了。
復(fù)制代碼 代碼如下:
$("#chklen").click(function(){
var bool = $("#txtContent").checkLength({
min : -1
,max: 10
});
if(bool){
alert(bool);
}
});
如果textarea是在form表單當(dāng)中的，則在表單提交的同時(shí)，進(jìn)行驗(yàn)證，條件滿(mǎn)足的時(shí)候再進(jìn)行提交。
如下示例：
復(fù)制代碼 代碼如下:
// 判斷 testarea 長(zhǎng)度是否超出限制
var ckContent = $("#txtContentIntro").checkLength({
min : -1 //不判斷是否為空
,max: 512 //最大長(zhǎng)度512
});
// 表單驗(yàn)證
var b = $("#fcourseware").valid();
// 執(zhí)行上傳操作，上傳成功后保存課件信息
if (b && ckContent ) {
// todo： submit form
}
min和max兩個(gè)參數(shù)均可以不傳遞值，默認(rèn)最小長(zhǎng)度0，最大長(zhǎng)度10.如果textarea不為必填項(xiàng)，則min 值賦予 -1.
最后通過(guò)返回bool值進(jìn)行操作。
您可能感興趣的文章:
- jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
- JQuery為textarea添加maxlength屬性的代碼
- jquery實(shí)現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法
- textarea中的手動(dòng)換行處理的jquery代碼
- 使用jquery給input和textarea設(shè)定ie中的focus
- Jquery實(shí)現(xiàn)點(diǎn)擊按鈕,連續(xù)地向textarea中添加值的實(shí)例代碼
- jQuery替換textarea中換行的方法
- TextArea不支持maxlength的解決辦法(jquery)
- 基于jquery的textarea發(fā)布框限制文字字?jǐn)?shù)輸入(添加中文識(shí)別)
- jquery實(shí)現(xiàn)限制textarea輸入字?jǐn)?shù)的方法
相關(guān)文章
jQuery實(shí)現(xiàn)的可編輯表格完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的可編輯表格,結(jié)合完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式與屬性的相關(guān)技巧,需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)強(qiáng)制cookie過(guò)期方法匯總
本文是對(duì)jquery 強(qiáng)制cookie失效的解決方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2015-05-05
基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)動(dòng)態(tài)搜索顯示功能的相關(guān)資料,輸入數(shù)值自動(dòng)匹配相關(guān)信息，感興趣的小伙伴們可以參考一下2016-05-05
jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)動(dòng)態(tài)加載內(nèi)容的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)動(dòng)態(tài)加載內(nèi)容的方法,實(shí)例分析了jQuery實(shí)現(xiàn)動(dòng)態(tài)加載頁(yè)面的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery控制輸入框只能輸入數(shù)值的小例子，需要的朋友可以參考一下2013-03-03
jQueryeasyui 中如何使用datetimebox 取兩個(gè)日期間相隔的天數(shù)
這篇文章主要介紹了jQueryeasyui 中使用datetimebox 取兩個(gè)日期間相隔的天數(shù)，需要的朋友參考下吧2017-06-06
jquer之a(chǎn)jaxQueue簡(jiǎn)單實(shí)現(xiàn)代碼
手頭不是很忙，突然想到了ajax queue這個(gè)概念，之前貌似有看技術(shù)文章中提到過(guò)這個(gè)，就想著用jquery來(lái)實(shí)現(xiàn)一下，思想比較簡(jiǎn)單2011-09-09
基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能的相關(guān)資料,需要的朋友可以參考下2016-08-08
基于jquery的一個(gè)OutlookBar類(lèi)，動(dòng)態(tài)創(chuàng)建導(dǎo)航條
初學(xué)jquery，如有錯(cuò)誤，請(qǐng)高手們指出想看效果及完整代碼的可以下載rar包2010-11-11
基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載
一般的select下拉框是不能輸入的，只能供大家選擇，今天小編給大家分享基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載，需要的朋友參考下2016-02-02