Jak zezwolić tylko na liczby w polu tekstowym w maszynce mvc4 razor

Mam 3 pole tekstowe, które przyjmuje wartości kod pocztowy i numer telefonu komórkowego oraz numer zamieszkania. Dostałem rozwiązanie pozwalające tylko na liczbę w polu tekstowym przy użyciu jQuery z postu Bellow.

Chciałbym, aby pole tekstowe EditFor akceptowało tylko liczby

ale czy możemy to zrobić za pomocą adnotacji danych, ponieważ używam maszynki do golenia MVC4?

po prostu bawiłem się z typem wejścia HTML5 = liczba. chociaż nie jest obsługiwany przez wszystkie przeglądarki, spodziewam się, że jest to sposób na obsługę specyficznego typu (np. numer). całkiem proste do zrobienia z maszynką do golenia (ex to VB)

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

i dzięki Lee Richardson, sposób C #

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

wykraczające poza zakres pytania, ale możesz zrobić to samo podejście dla dowolnego typu danych wejściowych HTML5

Użyj wyrażenia regularnego, np

[RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")]
public int Count { get; set; }

@Html.TextBoxFor(m => m.PositiveNumber, 
                      new { @type = "number", @class = "span4", @min = "0" })

w MVC 5 z Razor można dodać dowolny atrybut wejściowy html w obiekcie anonimowym zgodnie z powyższym przykładem, aby zezwolić tylko na liczby dodatnie w polu wejściowym.

w polu tekstowym napisz ten kod onkeypress="return isNumberKey(event)" i funkcję, która jest poniżej.

<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>

Użyj atrybutu DataType, ale będzie to z wyjątkiem wartości ujemnych, więc poniższe wyrażenie regularne pozwoli tego uniknąć

   [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; }

To zadziałało dla mnie:

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

Javacript:

//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);
    }
});

Użyj tej funkcji w swoim skrypcie i umieść zakres w pobliżu pola tekstowego, aby wyświetlić komunikat o błędzie

$(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>

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

Nie, jak rozumiem twoje pytanie, dyskretna weryfikacja pokaże tylko błędy. Najprostszym sposobem jest użycie wtyczki jquery:

Wtyczka zamaskowanego wejścia

Oto javascript, który pozwoli ci wprowadzić tylko liczby.

Zapisz się na onkeypresswydarzenie dla pola tekstowego.

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

Oto javascript do tego:

<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>

Mam nadzieję, że ci to pomoże.

dla wartości dziesiętnych większych od zera HTML5 działa w następujący sposób:

<input id="txtMyDecimal" min="0" step="any" type="number">

Może możesz użyć adnotacji danych [Integer] (jeśli używasz DataAnnotationsExtensions http://dataannotationsextensions.org/ ). Jednak spowoduje to tylko sprawdzenie, czy wartość jest liczbą całkowitą, a nie, jeśli jest wypełniona (może więc być potrzebny atrybut [Wymagany]).

Jeśli włączysz dyskretną weryfikację, zostanie ona zweryfikowana po stronie klienta, ale powinieneś również użyć Modelstate.Valid w akcji POST, aby odrzucić ją w przypadku, gdy ludzie mają wyłączony JavaScript.

DataTypema drugi konstruktor, który pobiera ciąg. Jednak wewnętrznie jest to w rzeczywistości to samo, co użycie UIHintatrybutu.

Dodanie nowego podstawowego elementu DataType nie jest możliwe, ponieważ DataTypewyliczenie jest częścią platformy .NET. Najbliższą rzeczą, jaką możesz zrobić, jest utworzenie nowej klasy, która dziedziczy po DataTypeAttribute. Następnie możesz dodać nowy konstruktor z własnym DataTypewyliczeniem.

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

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

Możesz także przejść przez ten link. Ale polecę ci użycie Jquery do tego samego.

Cześć, spróbuj następujących ...

<div class="editor-field">
  <%: Html.TextBoxFor(m => m.UserName, new {onkeydown="return ValidateNumber(event);" })%>
  <%: Html.ValidationMessageFor(m => m.UserName) %>
</div>

SCENARIUSZ

<script type="text/javascript">
   function ValidateNumber(e) {
       var evt = (e) ? e : window.event;
       var charCode = (evt.keyCode) ? evt.keyCode : evt.which;
       if (charCode > 31 && (charCode < 48 || charCode > 57)) {
           return false;
       }
       return true;
   };

@Html.TextBoxFor(x => x.MobileNo, new { @class = "digit" , @maxlength = "10"})

@section Scripts 
{
    @Scripts.Render("~/bundles/jqueryui")
    @Styles.Render("~/Content/cssjqryUi")

    <script type="text/javascript">
         $(".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;
            }
         });
    </script>
}

<input type = "number" @ bind = "Quantity" class = "txt2" />

Użyj type = "number"

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;
}}