共用方式為


使用 TextBoxWatermark 與驗證控制項 (C#)

作者:Christian Wenz

下載 PDF

AJAX Control Toolkit 中的 TextBoxWatermark 控制項會擴充文字方塊,以便在方塊內顯示文字。 當使用者按一下方塊時,即會清空。 如果使用離開方塊而不輸入文字,則預先填入的文字會重新出現。 這可能與相同頁面上的 ASP.NET 驗證控制項發生衝突,但可克服這些問題。

概觀

AJAX Control Toolkit 中的 TextBoxWatermark 控制項會擴充文字方塊,以便在方塊內顯示文字。 當使用者按一下方塊時,即會清空。 如果使用離開方塊而不輸入文字,則預先填入的文字會重新出現。 這可能與相同頁面上的 ASP.NET 驗證控制項發生衝突,但可克服這些問題。

步驟

範例的基本設定如下:TextBox 控制項會使用 TextBoxWatermarkExtender 控制項加上浮水印。 按鈕會觸發回傳,並在稍後用來觸發頁面上的驗證控制項。 此外,需要 ScriptManager 控制項才能初始化 ASP.NET AJAX:

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 <asp:TextBox ID="Name" runat="server" /> <br />
 <asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click" /><br />
 <asp:Label ID="lbl" runat="server" />
 </div>
 <ajaxToolkit:TextBoxWatermarkExtender ID="tbwe" runat="server"
 TargetControlID="Name" WatermarkText=" Your Name " />
</form>

現在新增 RequiredFieldValidator 控制項,這會檢查提交表單時欄位中是否有文字。 驗證程式的 InitialValue 屬性必須設定為 TextBoxWatermarkExtender 控制項中使用的相同值:提交表單時,未變更文字方塊的值就是其中的浮水印值:

<asp:RequiredFieldValidator ID="rfv1" ControlToValidate="Name"
 Text="*" InitialValue=" Your Name " Display="Dynamic" runat="server" />

然而,此方法有一個問題:如果用戶端停用 JavaScript,則文字欄位不會預先填入浮水印文字,因此 RequiredFieldValidator 不會觸發錯誤訊息。 因此,需要第二個 RequiredFieldValidator 控制項來檢查空白文字方塊 (省略 InitialValue 屬性)。

<asp:RequiredFieldValidator ID="rfv2" ControlToValidate="Name"
 Text="*" Display="Dynamic" runat="server" />

由於這兩個驗證程式都使用 Display="Dynamic",因此使用者無法區別兩個驗證程式引發的視覺外觀;相反地,它看起來好像只有其中一個。

最後,如果沒有驗證程式發出錯誤訊息,請新增一些伺服器端程式碼以輸出欄位中的文字:

<script runat="server">
 protected void btn_Click(object sender, EventArgs e)
 {
 lbl.Text = HttpUtility.HtmlEncode(Name.Text);
 }
</script>

驗證程式抱怨欄位中沒有文字

驗證程式抱怨欄位中沒有文字 (按一下以檢視完整大小的影像)