[自訂驗證控制項]多擇一必要輸入驗證

設計針對Textbox, DropDownList, checkboxlist, radiobuttonlist等input控制項,
驗證至少輸入一項的自訂驗證控制項。

網頁設計上常常很多需求,並不是單純驗證某個textbox或某個dropdownlist為必要輸入。

而是在許多input控制項裡,只要有一個有輸入即可。(例如「住家電話」與「行動電話」兩個textbox,至少輸入其中一項即可)當全都沒輸入時,要顯示驗證錯誤訊息。通常解法都是各自寫各自的java script作驗證,可是自行撰寫java script又不容易與微軟提供的Validator一起驗證,所以就花了一小段時間寫了個很陽春的Custom Validator。使用上還是有諸多不便,不過至少使用上撰寫的方式都是一致的。

 

class:MultiRequireValidator.vb

01 Imports System
02 Imports System.Collections.Generic
03 Imports System.ComponentModel
04 Imports System.Text
05 Imports System.Web
06 Imports System.Web.UI
07 Imports System.Web.UI.WebControls
08 Imports System.Drawing
09 Imports System.Web.Util

10
11 Namespace JoeyTest
12 <ToolboxData("<{0}:MultiRequireValidator runat=server ></{0}:MultiRequireValidator>")> _
13     Public Class MultiRequireValidator
14         Inherits System.Web.UI.WebControls.BaseValidator
15
16         Private _strObjectList As String = String.Empty
17         ''' <summary>
18         ''' 用","把要驗證的objID串起來
19         ''' </summary>
20         ''' <value></value>
21         ''' <returns></returns>
22         ''' <remarks></remarks>
23         <Browsable(True)> Public Overridable Property ObjectListToValidate() As String
24             Get
25                 Return _strObjectList
26             End Get
27             Set(ByVal Value As String)
28                 _strObjectList = Value
29             End Set
30         End Property
31
32         Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)
33             MyBase.AddAttributesToRender(writer)
34
35             If RenderUplevel Then
36                 writer.AddAttribute("evaluationfunction", "MultipleRequiredValidate")
37             End If
38         End Sub

39
40        ''' <summary>
41         ''' 引發 PreRender 事件
42         ''' </summary>
43         ''' <param name="e">包含事件資料的 EventArgs 物件。</param>
44         Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)
45             MyBase.OnPreRender(e)
46             Me.Attributes("ObjectListToValidate") = _strObjectList        
47         End Sub

48
49     End Class
50 End Namespace

 

aspx,只需include該驗證所需java script,範例為2個textbox與DropDownList,至少輸入一項

01 <script language="JavaScript" type="text/javascript" src="MultiRequire.js"></script>
02 <body>
03     <form id="form1" runat="server">
04     <div>
05         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
06         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
07         <asp:DropDownList ID="DropDownList1" runat="server">
08             <asp:ListItem Value=""></asp:ListItem>
09             <asp:ListItem Value="1"></asp:ListItem>
10             <asp:ListItem Value="2"></asp:ListItem>            
11         </asp:DropDownList>
12        
13         <JoeyTest:MultiRequireValidator ID="MultiRequireValidator1" runat="server" ErrorMessage="至少輸入一項" ControlToValidate="TextBox1" Display="none"></JoeyTest:MultiRequireValidator>
14         <asp:Button ID="Button1" runat="server" Text="Button" />
15         <asp:ValidationSummary ID="ValidationSummary1" runat="server" ShowMessageBox="true" ShowSummary="false"/>
16     </div>
17     </form>
18 </body>

vb的Page_Load事件,assign MultiRequireValidator.ObjectListToValidate即可

1 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
2         Me.MultiRequireValidator1.ObjectListToValidate = Me.DropDownList1.ClientID & "," & Me.TextBox1.ClientID & "," & Me.TextBox2.ClientID
3     End Sub

最後就是這個Validator所對應的js 驗證的function

01 function MultipleRequiredValidate(source, arguments)
02 {
03         var str_ObjectListToValidate="";
04   
05    if (document.getElementById&&!document.all)
06   {
07            str_ObjectListToValidate=source.getAttribute("ObjectListToValidate");      
08   }

09   else
10   {
11       str_ObjectListToValidate=source.ObjectListToValidate;      
12   }

13   
14   
15     var ary_ObjectListToValidate=str_ObjectListToValidate.split(",");
16     
17     if (ary_ObjectListToValidate==null){return ;}
18     else
19     {
20      if (ary_ObjectListToValidate.length<=1)
21      {return true;}
22      for(var i=0;i<ary_ObjectListToValidate.length;i++){
23       var ObjectIndex = $getID(ary_ObjectListToValidate[i]);
24       var strValue="";
25       if (ObjectIndex.value==null)
26       {
27            if (__ValidateCheckBoxListItems(ObjectIndex))
28            {return true;}
29                     
30       }

31       else
32       {
33           strValue=ObjectIndex.value;        
34           strValue=strValue.replace(/ /g ,"");                
35           strValue=strValue.replace(/ /g ,"");
36           if (strValue != "")
37           {return true;}
38       }

39             
40   }

41      return false;
42     }

43 }

44
45 //checkboxlist
46 function __ValidateCheckBoxListItems(val)
47 {
48     //var objCtl = document.all[val.controltovalidate];
49     //var colItems = objCtl.all;
50     var colItems = val.all;
51     for(var i=0;i<colItems.length;i++){
52   if (colItems.item(i).tagName == "INPUT") {
53       if ( colItems.item(i).checked ) {
54     return true;
55       }

56   }

57     }

58
59 }

60
61

目前使用上還是得在vb裡面加上clientID,畢竟先應急囉,

有空再把該屬性加工一下,應該可以在使用上更方便。

PS:CheckBoxList跟RadioButtonList是否有輸入,也可以使用唷。


或許您會對下列培訓課程感興趣:

  1. 2019/7/27(六)~2019/7/28(日):演化式設計:測試驅動開發與持續重構 第六梯次(台北)
  2. 2019/8/16(五)~2019/8/18(日):【C#進階設計-從重構學會高易用性與高彈性API設計】第二梯次(台北)
  3. 2019/9/21(六)~2019/9/22(日):Clean Coder:DI 與 AOP 進階實戰 第二梯次(台北)
  4. 2019/10/19(六):【針對遺留代碼加入單元測試的藝術】第七梯次(台北)
  5. 2019/10/20(日):【極速開發】第八梯次(台北)

想收到第一手公開培訓課程資訊,或想詢問企業內訓、顧問、教練、諮詢服務的,請洽 Facebook 粉絲專頁:91敏捷開發之路