DEV控件校验常用方式

    DEV常用校验方式

  1 <%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Inplace.aspx.cs"
  2     Inherits="Validation_Inplace" %>
  3 <asp:Content ID="Content1" ContentPlaceHolderID="ContentHolder" runat="server">
  4     <script type="text/javascript">
  5     // <![CDATA[
  6         function OnNameValidation(s, e) {
  7             var name = e.value;
  8             if(name == null)
  9                 return;
 10             if(name.length < 2)
 11                 e.isValid = false;
 12         }
 13         function OnAgeValidation(s, e) {
 14             var age = e.value;
 15             if(age == null || age == "")
 16                 return;
 17             var digits = "0123456789";
 18             for(var i = 0; i < age.length; i++) {
 19                 if(digits.indexOf(age.charAt(i)) == -1) {
 20                     e.isValid = false;
 21                     break;
 22                 }
 23             }
 24             if(e.isValid && age.charAt(0) == '0') {
 25                 age = age.replace(/^0+/, "");
 26                 if(age.length == 0)
 27                     age = "0";
 28                 e.value = age;
 29             }
 30             if(age < 18)
 31                 e.isValid = false;
 32         }
 33         function OnArrivalDateValidation(s, e) {
 34             var selectedDate = s.date;
 35             if(selectedDate == null || selectedDate == false)
 36                 return;
 37             var currentDate = new Date();
 38             if(currentDate.getFullYear() != selectedDate.getFullYear() || currentDate.getMonth() != selectedDate.getMonth())
 39                 e.isValid = false;
 40         }
 41     // ]]>
 42     </script>
 43     <div id="clientContainer">
 44         <table class="OptionsTable" runat="server" id="serverContainer">
 45             <tr>
 46                 <td style="width: 80px;"> 
 47                     <dx:ASPxLabel runat="server" ID="NameLabel" AssociatedControlID="NameTextBox" Text="Name:" />
 48                 </td>
 49                 <td>
 50                     <dx:ASPxTextBox runat="server" EnableClientSideAPI="True" Width="160px" ID="NameTextBox"
 51                         ClientInstanceName="Name" OnValidation="NameTextBox_Validation">
 52                         <ValidationSettings SetFocusOnError="True" ErrorText="Name must be at least two characters long">
 53                             <RequiredField IsRequired="True" ErrorText="Name is required" />
 54                         </ValidationSettings>
 55                         <ClientSideEvents Validation="OnNameValidation" />
 56                     </dx:ASPxTextBox>
 57                 </td>
 58             </tr>
 59             <tr>
 60                 <td>
 61                     <dx:ASPxLabel runat="server" ID="AgeLabel" AssociatedControlID="AgeTextBox" Text="Age:" />
 62                 </td>
 63                 <td>
 64                     <dx:ASPxTextBox runat="server" EnableClientSideAPI="True" Width="160px" ID="AgeTextBox"
 65                         ClientInstanceName="Age" OnValidation="AgeTextBox_Validation">
 66                         <ValidationSettings SetFocusOnError="True" ErrorText="Age must be greater than or equal 18" />
 67                         <ClientSideEvents Validation="OnAgeValidation" />
 68                     </dx:ASPxTextBox>
 69                 </td>
 70             </tr>
 71             <tr>
 72                 <td>
 73                     <dx:ASPxLabel runat="server" ID="EmailLabel" AssociatedControlID="EmailTextBox" Text="E-mail:" />
 74                 </td>
 75                 <td>
 76                     <dx:ASPxTextBox runat="server" EnableClientSideAPI="True" Width="160px" ID="EmailTextBox"
 77                         ClientInstanceName="Email">
 78                         <ValidationSettings SetFocusOnError="True">
 79                             <RegularExpression ErrorText="Invalid e-mail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
 80                             <RequiredField IsRequired="True" ErrorText="E-mail is required" />
 81                         </ValidationSettings>
 82                     </dx:ASPxTextBox>
 83                 </td>
 84             </tr>
 85             <tr>
 86                 <td> 
 87                     <dx:ASPxLabel runat="server" ID="ArrivalLabel" AssociatedControlID="ArrivalDateEdit"
 88                         Text="Arrival date:" />
 89                 </td>
 90                 <td>
 91                     <dx:ASPxDateEdit runat="server" Width="160px" ID="ArrivalDateEdit"
 92                         ClientInstanceName="ArrivalDate" OnValidation="ArrivalDateEdit_Validation">
 93                         <ValidationSettings SetFocusOnError="True" ErrorText="Arrival date is required and must belong to the current month">
 94                             <RequiredField IsRequired="True" ErrorText="" />
 95                         </ValidationSettings>
 96                         <ClientSideEvents Validation="OnArrivalDateValidation" />
 97                     </dx:ASPxDateEdit>
 98                 </td>
 99             </tr>
100             <tr>
101                 <td>
102                 </td>
103                 <td>
104                     <table>
105                         <tr>
106                             <td>
107                                 <dx:ASPxButton ID="btnOk" runat="server" Text="OK" />
108                             </td>
109                             <td style="padding-left: 8px">
110                                 <dx:ASPxButton ID="btnReset" runat="server" AutoPostBack="False" Text="Reset"
111                                     CausesValidation="False">
112                                     <ClientSideEvents Click="function(s, e) { ASPxClientEdit.ClearEditorsInContainerById('clientContainer') }" />
113                                 </dx:ASPxButton>
114                             </td>
115                         </tr>
116                     </table>
117                 </td>
118             </tr>
119         </table>
120     </div>
121 
122     <div style="margin-top: 48px;">
123         <div style="float: left">
124             <div>ErrorDisplayMode:</div>
125             <div class="TopPadding">
126                 <dx:ASPxRadioButtonList ID="rblErrorDisplayMode" runat="server"
127                     OnSelectedIndexChanged="OnSettingsChanged"
128                     SelectedIndex="0" AutoPostBack="True">
129                     <Items>
130                         <dx:ListEditItem Value="ImageWithText" />
131                         <dx:ListEditItem Value="ImageWithTooltip" />
132                         <dx:ListEditItem Value="Text" />
133                         <dx:ListEditItem Value="None" />
134                     </Items>
135                 </dx:ASPxRadioButtonList>
136             </div>
137         </div>
138         <div style="float: left" class="LeftPadding">
139             <div>
140                 &nbsp;
141             </div>
142             <div class="TopPadding">
143                 <dx:ASPxCheckBox ID="chbValidateOnLeave" runat="server" Checked="True" OnCheckedChanged="OnSettingsChanged"
144                     AutoPostBack="True" Text="ValidateOnLeave" /> 
145             </div>
146             <div class="TopPadding">
147                 <dx:ASPxCheckBox ID="chbSetFocusOnError" runat="server" OnCheckedChanged="OnSettingsChanged"
148                     AutoPostBack="True" Text="SetFocusOnError" />
149             </div>
150         </div>
151     </div> 
152 
153 </asp:Content>

View Code

上面是前台代码，主要的方式有：

1. 正则校验
2. js校验

• 正则校验

1  <dx:ASPxTextBox runat="server" EnableClientSideAPI="True" Width="160px" ID="EmailTextBox"
2                         ClientInstanceName="Email">
3                         <ValidationSettings SetFocusOnError="True">
4                             <RegularExpression ErrorText="Invalid e-mail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />
5                             <RequiredField IsRequired="True" ErrorText="E-mail is required" />
6                         </ValidationSettings>
7                     </dx:ASPxTextBox>

View Code

在控件标签中添加<ValidationSettings />并设置相关属性上面以校验EMail为例，这里推荐一个在线正则验证网站：
http://rubular.com/  写完的正则，或者找到的正则可以在这里先进行校验，正确后在放到程序中，节省很多调试的时间。

• js校验

 在 <ValidationSettings />标签中加入 <ClientSideEvents Validation="YourValidationJS" /> Validation 参数为你的JS校验函数名称

• 常用属性

1. ErrorDisplayMode：ImageWithText      ImageWithTooltip    Text     None(Textbox周围变红)
2. ValidateOnLeave： True | False
3. SetFocusOnError:  True | False

Dev官方Demo地址：http://demos.devexpress.com/ASPxEditorsDemos/Validation/Inplace.aspx

 

 

转载于:https://www.cnblogs.com/xiao6/p/3531476.html