如何使用asp.net按钮通过jquery进行验证然后进入后台代码web表单

Posted 2023-05-09

【中文标题】如何使用asp.net按钮通过jquery进行验证然后进入后台代码web表单

【英文标题】：How to use the asp.net button to validate by jquery and then go to the behind code web form

【发布时间】：2020-10-10 05:33:37

【问题描述】：

我有一个 asp.net 网络表单，我想先验证文本框 然后之后（成功后），去后面的代码cs 但是现在当我按下按钮时它不起作用

jquery 代码： ...

<script type="text/javascript">
         (function () 
             'use strict';
             window.addEventListener('load', function () 
                 var form = document.getElementById('needs-validation');
                 form.addEventListener('submit', function (event) 
                         if (form.checkValidity() === false) 
                         event.preventDefault();
                         event.stopPropagation();
                     
                    form.classList.add('was-validated');
                , false);
            , false);
        )();
    </script>

...

aspx 页面： ...

    <div class="form-row" style="z-index:1">
        <div class="form-group col-md-4" style="z-index:1">
      <label for="inputEmail4">Birth Date</label>
        <asp:TextBox ID="Birth_Date" class="form-control" runat="server" style="text-align:center" ValidationGroup="check" required></asp:TextBox>
      <cc1:CalendarExtender ID="CalendarExtender1" runat="server" Enabled="True" TargetControlID="Birth_Date" Format="dd/MM/yyyy">
      </cc1:CalendarExtender>
              <div class="invalid-feedback">  
                  enter date
             </div>
          </div></div>
<div class="form-row">
    <div class="form-group col-md-4">
      <label for="inputEmail4">phone number</label>
        <asp:TextBox ID="Phone" class="form-control"  runat="server" style="text-align:center; z-index:-1" ValidationGroup="check" pattern="^\d10$" required></asp:TextBox>
         <div class="invalid-feedback">  
                  enter phone
             </div>
    </div>
      </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:LinkButton ID="signup" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>
        </ContentTemplate>
    </asp:UpdatePanel>

...

cs 代码： ...

protected void signup_Click1(object sender, EventArgs e)
        
        if(Page.IsValid)
        
            Birth_Date.Text = "ُWelcome";
        
        

...

我的 aspx 页面中有更多文本框

【问题讨论】：

您的ID="signup" 按钮上没有OnClick 事件。如果你想在提交之前做一些事情，还可以添加OnClientClick 事件并调用你想要的任何 js 函数。通过OnClientClick，您还可以阻止提交发生

您拥有的是网络表单，而不是赢取表单

@JayNyxed 我添加了 OnClick 和 OnClientClick 并没有工作，但是当我使用 html 按钮时它工作了！但是脚本验证成功后我无法访问后面的代码

【参考方案1】：

<script type="text/javascript">
         function ftn()
             'use strict';
             window.addEventListener('load', function () 
                 var form = document.getElementById('needs-validation');
                 form.addEventListener('submit', function (event) 
                         if (form.checkValidity() === false) 
                         event.preventDefault();
                         event.stopPropagation();
                     
                    form.classList.add('was-validated');
                , false);
            , false);
        
    </script>

并将 onclientclick 属性添加到 asp:button

<asp:LinkButton ID="signup" onclientclick="ftn()" runat="server" CssClass="btn btn-outline-success my-2 my-sm-0">save</asp:LinkButton>

【讨论】：

没用！当我按下按钮时，什么都没有出现！

将此 [ScriptManager.RegisterStartupScript(this.Page, Page.GetType(), "text", "Func()", true);] 添加到您的按钮单击事件中。