Question

我在表单上有一个字段，允许用户输入0到5000之间的数字

我尝试了3种不同的方法，但是当我输入大于5000的数字时，对于所有这三种方法，我的表单提交被接受，这是不应该发生的：

接近1：

<asp:CustomValidator ControlToValidate="price" runat="server" ID ="inrange" 
                     ErrorMessage="Must not exceed 5k" 
                     OnServerValidate="lessThan5k">
</asp:CustomValidator>

在代码隐藏中使用此代码

protected void lessThan5k(object sender, ServerValidateEventArgs e)
{
  if (Convert.ToInt32(price.Value) < 5000)
  {
    e.IsValid = true;
  }
  else
  {
    e.IsValid = false;
  }
}

方法2：

<script type="text/javascript">

  var listen = document.getElementById("price");

  listen.addEventListener("input", function () {
    var value = new parseInt(price.Value);
    if (value > 5000) {
      price.setCustomValidity("must not exceed 5000");
    } else {
      price.setCustomValidity("");
    }
  });
</script>

最后但并非最不重要的方法3：

限制表单字段数值范围的正确方法是什么？

Answer 1

使用RangeValidator。将其拖离工具箱并将其放入页面设计中。

设置以下属性：

的ControlToValidate - ＆GT;你的TextBox ID
类型 - ＆gt;整数（以便将其视为整数）
MinimumValue - ＆gt; 0
MaximumValue - ＆gt; 5000

如果您不希望发布表单，即使该值未通过验证，也请设置EnableClientScript = false，以便仅在服务器端发布并验证。

请记住，如果您不想允许空条目，还需要使用RequiredFieldValidator。

Answer 2

您应该查看RangeValidator或ASP.NET中内置的任何其他验证程序控件。这是最简单的方法，因为它可以跨浏览器工作。只需将MinimumValue，MaximumValue，Type和Text设置为适当的值;您甚至可以使用EnableClientScript属性进行客户端验证。

<asp:RangeValidator id="inrange"
    ControlToValidate="price"
    MinimumValue="0"
    MaximumValue="5000"
    Type="Integer"
    EnableClientScript="true"
    Text="Must not exceed 5k"
    runat="server"/>

或者，查看表单提交按钮上的click事件并执行客户端检查值，然后在值无效时取消单击。但是，您仍然需要对值进行服务器端验证，因为您无法保证用户在其计算机上启用了JavaScript（这意味着他们可以提交无效数据）。

function validatePrice(e){
    var value = new parseInt(price.Value);
    if (value > 5000) {
      price.setCustomValidity("must not exceed 5000");
      e.preventDefault();
    } else {
      price.setCustomValidity("");
    }
};

if (window.addEventListener){
    document.getElementById("price").addEventListener("click", validatePrice);
} else if (window.attachEvent){
    document.getElementById("price").attachEvent("click", validatePrice);
}

原始的JavaScript代码挂钩“输入”，它应该挂钩“点击”事件。此外，您需要知道该代码不适用于IE9以下的任何内容......对于那些代码，您需要使用attachEvent而不是addEventListener。

纯HTML5方法（不一定是跨浏览器）是在输入元素本身上设置属性。

<input type="number" min="0" max="5000" step="0.01" placeholder="Price" />

这将告诉兼容的浏览器在允许提交表单之前执行浏览器端验证。 Chrome支持所有这些属性，Firefox支持我列出的大部分属性，但IE不支持它们。

Answer 3

你想和哪个事件挂钩？

输入可能不是正确的。

挂钩场上的模糊或偶然事件或表格上的提交事件。

我认为你当前的代码根本不会执行。

Answer 4

同意saluce！

在服务器端检查页面是否有效，按钮的单击事件应如下所示：

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            lblResponse.Text = "Page successfully submitted!";
        }
    }

我的验证员都没有工作

4 个答案: