使用 TextBoxWatermark 與驗證控制項 (VB)

作者 ：擷取 Wenz

下載 PDF

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

概觀

TextBoxWatermarkAJAX 控制項工具組中的控制項會延伸文字方塊，讓文字顯示在方塊中。 當使用者按一下方塊時，即會清空。 如果使用者離開方塊而不輸入文字，則預先填入的文字會重新出現。 這可能會與相同頁面上的 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 Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs)
 lbl.Text = HttpUtility.HtmlEncode(Name.Text)
 End Sub
</script>

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

[上一步]