带有MaxLength验证的多行文本框

分享于 

6分钟阅读

Web开发

  繁體 雙語

介绍

在几乎所有的网络项目中,我们需要一个多行 TextBox 控件。 发现 maxLength 属性在多行文本框上不起作用是令人厌烦的。 有多种解决方案建议使用验证器控件来验证长度。 我建议我们应该放置一个验证器以及扩展控件,以便用户不能输入超过指定长度的字符。

扩展文本框

为了达到这个目的,我尝试扩展 ASP.NET TextBox web。

using System;using System.Collections.Generic;using System.Text;using System.Web.UI.WebControls;namespace CustomWebControls
{
 ///<summary>/// Extended TextBox control that applies/// javascript validation to Multiline TextBox///</summary>publicclass TextArea: TextBox
 {
 ///<summary>/// Override PreRender to include custom javascript///</summary>///<paramname="e"></param>protectedoverridevoid OnPreRender(EventArgs e)
 {
 if (MaxLength >0 && TextMode == TextBoxMode.MultiLine)
 {
 // Add javascript handlers for paste and keypress Attributes.Add("onkeypress","doKeypress(this);");
 Attributes.Add("onbeforepaste","doBeforePaste(this);");
 Attributes.Add("onpaste","doPaste(this);");
 // Add attribute for access of maxlength property on client-side Attributes.Add("maxLength", this.MaxLength.ToString());
 // Register client side include - only once per pageif(!Page.ClientScript.IsClientScriptIncludeRegistered("TextArea"))
 {
 Page.ClientScript.RegisterClientScriptInclude("TextArea", 
 ResolveClientUrl("~/js/textArea.js"));
 }
 }
 base.OnPreRender(e);
 }
 }
}

现在我们的自定义控件可以使用了。 如果你希望在 上面 代码中找到 TextMode,那么我添加定制JavaScript和一个属性来在客户端传递 maxLength,这在代码 block 中是一个自我解释的。 我利用 ClientScript 来附加一个 JavaScript,每个页面只有一个。 因为这允许我们轻松修改 JavaScript,所以我选择将JavaScript作为外部文件。 此外,页面不会变得臃肿,脚本将被缓存。

在项目库中创建这个控件,以便在我们的任何项目中使用这个控件。

JavaScript文件

// Keep user from entering more than maxLength charactersfunction doKeypress(control){
 maxLength = control.attributes["maxLength"].value;
 value = control.value;
 if(maxLength && value.length> maxLength-1){
 event.returnValue = false;
 maxLength = parseInt(maxLength);
 }
}// Cancel default behaviorfunction doBeforePaste(control){
 maxLength = control.attributes["maxLength"].value;
 if(maxLength)
 {
 event.returnValue = false;
 }
}// Cancel default behavior and create a new paste routinefunction doPaste(control){
 maxLength = control.attributes["maxLength"].value;
 value = control.value;
 if(maxLength){
 event.returnValue = false;
 maxLength = parseInt(maxLength);
 var oTR = control.document.selection.createRange();
 var iInsertLength = maxLength - value.length + oTR.text.length;
 var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);
 oTR.text = sData;
 }
}

使用自定义控件

为了测试自定义控件,我创建了一个测试网站并添加了对该项目的引用。 在每个页面上,我都想避免添加 register 标记,因此我继续在 system.web web.config的部分添加以下语句。

<pages><controls><addtagPrefix="CustomControls"namespace="CustomWebControls"assembly="CustomWebControls"></add></controls></pages>

现在我创建了一个测试网页,并将该控件添加到页面上,如下所示:

<CustomControls:TextArearunat="server"ID="testTextArea"MaxLength="10"TextMode="MultiLine"></CustomControls:TextArea>

然后我在JS文件夹中添加了JavaScript文件。

测试解决方案,然后 ! 我首次尝试创建扩展的自定义网页控件是成功的。 请您多多指教。

我所学的事物

  • 扩展网页控制是轻而易举的。
  • Page的新 ClientScript 属性。 以及相关的IsClientScriptIncludeRegisteredRegisterClientScriptInclude 属性。
  • 在 Web.Config 中添加了标记前缀,而不是在每个页面中指定。

支持的客户端浏览器

  • IE 6.0

其他笔记

  • 为了让这个控件在其他浏览器上工作,我们可能需要在JS文件中进行一些修改。
  • 这个解决方案是在 Visual Studio 2005开发的。 我们只需要更改 IsClientScriptIncludeRegisteredRegisterClientScriptInclude的调用就可以将它转换为 Visual Studio 2003。
  • 还需要为长度检查添加验证控件。 这将允许你验证输入,即使客户端脚本失败。

感谢CodeProject的所有帮助 !


文本  TEX  最大  多行  Maxlength