89

郵便番号と携帯電話番号と住宅番号の値を取る 3 つのテキスト ボックスがあります。ベローの投稿からjqueryを使用して、テキストボックスに数字のみを許可するソリューションを得ました。

EditFor テキストボックスに数字のみを受け入れさせたい

しかし、MVC4 razor を使用しているので、データ注釈を使用してこれを行うことはできますか?

4

16 に答える 16

107

私はHTML5のinput type = numberで遊んでいました。すべてのブラウザーでサポートされているわけではありませんが、タイプ固有の処理 (ex の番号) を処理する方法であると思います。カミソリで行うのは非常に簡単です（例はVBです）

@Html.TextBoxFor(Function(model) model.Port, New With {.type = "number"})

Lee Richardson に感謝します。

@Html.TextBoxFor(i => i.Port, new { @type = "number" })

質問の範囲を超えていますが、html5入力タイプに対してこれと同じアプローチを行うことができます

于 2013-05-24T15:53:54.107 に答える
66

正規表現を使用します。

[RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")]
public int Count { get; set; }
于 2014-03-25T11:49:50.490 に答える
57 
@Html.TextBoxFor(m => m.PositiveNumber, 
                      new { @type = "number", @class = "span4", @min = "0" })

MVC 5 と Razor では、上記の例のように匿名オブジェクトに任意の html 入力属性を追加して、入力フィールドに正の数のみを許可できます。

于 2015-10-05T03:18:38.913 に答える
15

テキストボックスにこのコードonkeypress="return isNumberKey(event)" を書き、この関数はすぐ下にあります。

<script type="text/javascript">
function isNumberKey(evt)
{
          var charCode = (evt.which) ? evt.which : event.keyCode;
          if (charCode != 46 && charCode > 31 
            && (charCode < 48 || charCode > 57))
             return false;

          return true;
}
</script>
于 2013-02-06T12:53:54.333 に答える
10

DataType属性を使用してください。これは負の値を受け入れるため、以下の正規表現はこれを回避します。

   [DataType(DataType.PhoneNumber,ErrorMessage="Not a number")]
   [Display(Name = "Oxygen")]
   [RegularExpression( @"^\d+$")]
   [Required(ErrorMessage="{0} is required")]
   [Range(0,30,ErrorMessage="Please use values between 0 to 30")]
    public int Oxygen { get; set; }
于 2016-02-10T10:27:44.720 に答える
8

これは私のために働いた：

<input type="text" class="numericOnly" placeholder="Search" id="txtSearch">

Javascript:

//Allow users to enter numbers only
$(".numericOnly").bind('keypress', function (e) {
    if (e.keyCode == '9' || e.keyCode == '16') {
        return;
    }
    var code;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if (e.which == 46)
        return false;
    if (code == 8 || code == 46)
        return true;
    if (code < 48 || code > 57)
        return false;
});

//Disable paste
$(".numericOnly").bind("paste", function (e) {
    e.preventDefault();
});

$(".numericOnly").bind('mouseenter', function (e) {
    var val = $(this).val();
    if (val != '0') {
        val = val.replace(/[^0-9]+/g, "")
        $(this).val(val);
    }
});
于 2014-12-10T23:31:31.057 に答える
8

スクリプトでこの関数を使用し、テキスト ボックスの近くにスパンを配置して、エラー メッセージを表示します。

$(document).ready(function () {
    $(".digit").keypress(function (e) {
        if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            $("#errormsg").html("Digits Only").show().fadeOut("slow");
            return false;
        }
    });
});

@Html.TextBoxFor(x => x.company.ContactNumber, new { @class = "digit" })
<span id="errormsg"></span>
于 2015-07-13T07:23:51.527 に答える
3

can we do this using data annotations as I am using MVC4 razor ?

いいえ、あなたの質問を理解しているので、目立たない検証ではエラーのみが表示されます。最も簡単な方法は、jquery プラグインを使用することです。

マスク入力プラグイン

于 2013-02-06T11:37:56.733 に答える
2

これは、数字のみを入力できるJavaScriptです。

onkeypressテキストボックスのイベントをサブスクライブします。

@Html.TextBoxFor(m=>m.Phone,new { @onkeypress="OnlyNumeric(this);"})

そのためのJavaScriptは次のとおりです。

<script type="text/javascript">
function OnlyNumeric(e) {
            if ((e.which < 48 || e.which > 57)) {
                if (e.which == 8 || e.which == 46 || e.which == 0) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
</script>

お役に立てば幸いです。

于 2013-02-06T12:44:01.983 に答える
1

おそらく [Integer] データ注釈を使用できます (DataAnnotationsExtensions http://dataannotationsextensions.org/を使用する場合) 。ただし、これは値が整数であるかどうかのみをチェックし、値が入力されているかどうかはチェックしません (したがって、[Required] 属性も必要になる場合があります)。

Unobtrusive Validation を有効にすると、クライアント側で検証されますが、Javascript が無効になっている場合に備えて、POST アクションで Modelstate.Valid を使用して拒否する必要もあります。

于 2013-02-06T12:24:06.113 に答える
0

DataType文字列を取る 2 番目のコンストラクターがあります。UIHintただし、内部的には、これは実際には属性を使用することと同じです。

DataType列挙は .NET フレームワークの一部であるため、新しいコア DataType を追加することはできません。あなたができる最も近いことは、から継承する新しいクラスを作成することですDataTypeAttribute. DataType次に、独自の列挙型で新しいコンストラクターを追加できます。

public NewDataTypeAttribute(DataType dataType) : base(dataType)
 { }

public NewDataTypeAttribute(NewDataType newDataType) : base (newDataType.ToString();

こちらのリンクからも行けます。ただし、同じ目的で Jquery を使用することをお勧めします。

于 2013-02-06T11:43:24.037 に答える
-1 
function NumValidate(e) {
    var evt = (e) ? e : window.event;
    var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        alert('Only Number ');
        return false;
    }    return true;
}  function NumValidateWithDecimal(e) {

var evt = (e) ? e : window.event;
var charCode = (evt.keyCode) ? evt.keyCode : evt.which;

if (!(charCode == 8 || charCode == 46 || charCode == 110 || charCode == 13 || charCode == 9) && (charCode < 48 || charCode > 57)) {
    alert('Only Number With desimal e.g.: 0.0');
    return false;
}
else {
    return true;
} } function onlyAlphabets(e) {
try {
    if (window.event) {
        var charCode = window.event.keyCode;
    }
    else if (e) {
        var charCode = e.which;
    }
    else { return true; }

    if ((charCode > 64 && charCode < 91) || (charCode > 96 && charCode < 123) || (charCode == 46) || (charCode == 32))
        return true;
    else
        alert("Only text And White Space And . Allow");
    return false;

}
catch (err) {
    alert(err.Description);
}} function checkAlphaNumeric(e) {

if (window.event) {
    var charCode = window.event.keyCode;
}
else if (e) {
    var charCode = e.which;
}
else { return true; }

if ((charCode >= 48 && charCode <= 57) || (charCode >= 65 && charCode <= 90) || (charCode == 32) || (charCode >= 97 && charCode <= 122)) {
    return true;
} else {
    alert('Only Text And Number');
    return false;
}}
于 2017-12-08T13:25:35.280 に答える