验证文本框的正则表达式后 ASP.NET 禁用按钮

Question

我想在用户使用正确的正则表达式提交表单后禁用 asp 按钮

这是我的表格

<asp:TextBox ID="TextBox2" runat="server" placeholder="Email" class="form-control" type="email" Font-Size="Large" oninvalid="setCustomValidity(')"></asp:TextBox>

<asp:Button ID="Button1" runat="server" class="btn btn-primary btn-block btn-lg" Text="Submit" OnClick="Button1_Click" ValidationGroup="S" UseSubmitBehavior="false" OnClientClick="myFunction2()" />

<asp:RegularExpressionValidator ID="RegularExpressionValidator3" ControlToValidate="TextBox2" runat="server" ErrorMessage="Invalid Email" ValidationGroup="S" Visible="false" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

这是验证javascript函数

<script>
    function myFunction2() {
        if (Page_ClientValidate('S')) {
                                    document.getElementById('Button1').disabled = true;
                    document.getElementById('Button1').value = "Please waitً";
         }
 } 
</script>

问题是在文本框有任何未通过电子邮件正则表达式检查的值后按钮被禁用

代码背后

protected void Button1_Clicked(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); }

Answer 1

一些客户端 JavaScript 魔法怎么样：

var goodEmail = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var goodEntry = /^^(?:(?:[^<>()[\]\\.,;:\s@\"]*(?:\.[^<>()[\]\\.,;:\s@\"]*)*)|(?:\"?.*\"?))@?(?:(?:\[?[0-9]{0,3}\.?[0-9]{0,3}\.?[0-9]{0,3}\.?[0-9]{0,3}\]?)|(?:(?:[a-zA-Z\-0-9]*\.)*[a-zA-Z]{0,}))$/;

$("input")
  .data("oldValue", "")
  .bind("input propertychange", function() {
var $this = $(this);
var newValue = $this.val();

if (!goodEntry.test(newValue))
    return $this.val($this.data("oldValue"));
if (goodEmail .test(newValue)) {
    $this.removeClass("redborder");
    $("#submitBtn").prop("disabled",false);
}
else {
    $this.addClass("redborder");
    $("#submitBtn").prop("disabled",true);
}

return $this.data("oldValue", newValue);
  });

function submitit() {
    console.log($("#email").val() + " is valid: Ready to proceed!");
}

.redborder { border: 1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <p>Enter an email address:</p>
  <input id='email'>
  <button type='submit' disabled id='submitBtn' onclick="submitit()">Submit</button>
</form>

但是，客户端验证还不足以保证安全。各种事情都可能发生。

Answer 2

假设您想在服务器端处理期间锁定提交按钮。要做到这一点，请在以下方法中使用asp:Button 的OnClientClick 属性：

<asp:Button 
  ID="Button1" 
  runat="server" 
  class="btn btn-primary btn-block btn-lg" 
  Text="Submit" 
  OnClick="Button1_Click" 
  UseSubmitBehavior="false" 
  OnClientClick="this.disabled = true; this.value = 'Processing ...';" />

所以当用户点击按钮时该按钮将被禁用，而当服务器端操作完成时该按钮将被启用。