Question

我正在开发asp.net网络表单。在ascx页面中，我有一个UpdatePanel。在UpdatePanel1中，我有一个来自Ajax Control Toolkit的ModalPopupExtender，它显示了一个用于电子邮件输入的文本框，我想以适当的格式验证电子邮件输入。我尝试了两种方法。在第一个我使用asp:RegularExpressionValidator。在第二个中，我在客户端点击事件上添加了一个javascript函数，如下所示：

OnClientClick="if(!CheckEmail()){return false};"

无论电子邮件输入是否正确，它们都无法正常工作，弹出模式的输入始终会被发送到服务器。我确保电子邮件输入文本框有CausesValidation="True"

<asp:UpdatePanel>
  <asp:Panel ID="ConfirmAdd" runat="server" CssClass="modalPopup"   style="display: none;" Width="530px" >  
   <div style="text-align:center">
    <b>Create New User</b>
   </div>
  <table width="100%">
    <tr>
        <td>User ID (Email):</td>
        <td><asp:TextBox ID="email"  Width="300px"  runat="server"  MaxLength="50" CausesValidation="True"  ClientIDMode="Static" />
            <asp:RequiredFieldValidator id="RequiredFieldValidator2" runat="server"  Text="Email required."  ControlToValidate="email"  
                ValidationGroup="adduser"  ></asp:RequiredFieldValidator>
            <asp:RegularExpressionValidator id="EmailRegularExpressionValidator" ControlToValidate="email" 
                ValidationExpression="\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b"
                ErrorMessage="Email must be in valid format" Text="Email must be in valid format" 
                EnableClientScript="False" runat="server" ValidationGroup="adduser" SetFocusOnError="True" />
        </td>
    </tr>

  </table>
    <div style="text-align:center">
    <br />
    <asp:button id="Button1" runat="server" OnClick="Button1_Click"    UseSubmitBehavior="false" Text="Add"  ValidationGroup="adduser"  OnClientClick="if (!CheckEmail()){return false;}" />&nbsp;<asp:Button ID="RefCancel"  runat="server" Text="Cancel" ValidationGroup="none"  />
    </div>

  </ContentTemplate>

Answer 1

您可以尝试使用bootstrap模式。创建一个按钮以打开模态：

    <input type="button" id="shModal" 
           name="shModal" class="btn btn-success btn-outline" 
           data-target="#myModal" data-toggle="modal" value="New" />

然后在你的模态中添加一个文本框：

<div class="container row form-horizontal">

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Input Email</h4>
              </div>
              <div class="modal-body">
                <div class="row">
                    <div class="form-group">
                        <asp:Label runat="server" CssClass="control-label col-md-4">Email</asp:Label>
                        <div class="col-md-6">
                            <asp:TextBox runat="server" ID="txtEmail" CssClass="form-control text-uppercase"></asp:TextBox>
                        </div>
                    </div>
                </div>

              </div>
              <div class="modal-footer">
                  <asp:Button runat="server" ID="cmdSave" CssClass="btn btn-info pull-left" Text="Save" 
                            OnClick="cmdSave_Click" OnClientClick="return ValidateEmail();" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                </div>
            </div>
            </div>
</div><!--Item Modal-->

然后添加您的jquery验证码：

function ValidateEmail(){
        if(!isEmailValid()){
            return false;
}else{
alert('boyyyya, email is valid!');
}
        }

Regularexpressionvalidator不适用于asp.net updatepanels

1 个答案: