0

我在表单上有一个字段，允许用户输入 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：

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

4

4 回答 4

2

使用RangeValidator。将其从工具箱中拖放到您的页面设计中。

设置以下属性：

  • ControlToValidate--> 你的 TextBox Id
  • 类型 --> 整数（以便将其视为整数）
  • 最小值 --> 0
  • 最大值 --> 5000

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

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

于 2012-05-18T14:51:44.017 回答
1

您应该查看RangeValidatorASP.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"/>

或者，查看在表单提交按钮上挂钩单击事件并执行客户端检查值，然后如果值无效则取消单击。但是，您仍然需要对值执行服务器端验证，因为您不能保证用户会在他们的机器上启用 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 不能很好地支持它们。

于 2012-05-18T14:46:21.273 回答
0

你要参加哪个活动？

输入可能不是正确的。

要么挂钩到字段上的模糊或偶然事件，要么挂钩表单上的提交事件。

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

于 2012-05-18T14:51:04.413 回答
0

同意saluce！

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

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            lblResponse.Text = "Page successfully submitted!";
        }
    }
于 2012-05-18T15:00:43.047 回答