0

ユーザーが 0 から 5000 までの数値を入力できるフォームのフィールドがあります。

私は 3 つの異なるアプローチを試しましたが、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
  • Type --> Integer (整数として扱われるように)
  • 最小値 --> 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 コードは、「クリック」イベントをフックする必要があるときに、「入力」をフックします。attachEventまた、そのコードは IE9より下では機能しないことを知っておく必要がありますaddEventListener。

純粋に HTML5 の方法 (必ずしもクロスブラウザーであるとは限りません) は、input 要素自体に属性を設定することです。

<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

サルースに同意！

ページが有効かどうかをサーバー側で確認するには、ボタンのクリック イベントは次のようになります。

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