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 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>
上面是前台代码,主要的方式有:
- 正则校验
- 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>
在控件标签中添加<ValidationSettings
/>并设置相关属性上面以校验EMail为例,这里推荐一个在线正则验证网站:
http://rubular.com/ 写完的正则,或者找到的正则可以在这里先进行校验,正确后在放到程序中,节省很多调试的时间。
- js校验
在 <ValidationSettings />标签中加入 <ClientSideEvents Validation="YourValidationJS" /> Validation 参数为你的JS校验函数名称
- 常用属性
- ErrorDisplayMode:ImageWithText ImageWithTooltip Text None(Textbox周围变红)
- ValidateOnLeave: True | False
- SetFocusOnError: True | False
Dev官方Demo地址:http://demos.devexpress.com/ASPxEditorsDemos/Validation/Inplace.aspx