So lassen Sie nur Zahlen im Textfeld in mvc4 razor zu

Ich habe 3 Textfelder, die Werte Postleitzahl & Handynummer & Wohnnummer annehmen. Ich habe die Lösung bekommen, nur Zahlen in Textfeldern mit jquery von Bellow post zuzulassen.

Ich möchte, dass ein EditFor-Textfeld nur Zahlen akzeptiert

Aber können wir dies mithilfe von Datenanmerkungen tun, da ich MVC4-Rasierer verwende?

Ich habe nur mit HTML5-Eingabetyp = Nummer herumgespielt. Obwohl es nicht von allen Browsern unterstützt wird, gehe ich davon aus, dass es der Weg ist, um die typspezifische Behandlung (z. B. Nummer) zu handhaben. ziemlich einfach mit Rasiermesser zu tun (ex ist VB)

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

und danke an Lee Richardson, den Weg

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

Sie können diesen Ansatz jedoch für jeden HTML5-Eingabetyp verwenden

Verwenden Sie einen regulären Ausdruck, z

[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" })

In MVC 5 mit Razor können Sie ein beliebiges HTML-Eingabeattribut im anonymen Objekt wie im obigen Beispiel hinzufügen, um nur positive Zahlen in das Eingabefeld zuzulassen.

In das Textfeld schreiben Sie diesen Code onkeypress="return isNumberKey(event)" und die Funktion dafür ist unten.

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

Bitte verwenden Sie das DataType-Attribut, dies schließt jedoch negative Werte aus, sodass der folgende reguläre Ausdruck dies vermeidet

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

Das hat bei mir funktioniert:

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

Verwenden Sie diese Funktion in Ihrem Skript und setzen Sie einen Bereich in die Nähe des Textfelds, um die Fehlermeldung anzuzeigen

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

Nein, so wie ich Ihre Frage verstehe, zeigt eine unauffällige Validierung nur Fehler. Der einfachste Weg ist das jquery Plugin:

Maskiertes Eingabe-Plugin

Hier ist das Javascript, mit dem Sie nur Zahlen eingeben können.

Abonnieren Sie das onkeypressEreignis für das Textfeld.

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

Hier ist das Javascript dafür:

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

Hoffe es hilft dir.

Für Dezimalwerte größer als Null funktioniert HTML5 wie folgt:

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

Möglicherweise können Sie die Datenanmerkung [Integer] verwenden (wenn Sie die DataAnnotationsExtensions http://dataannotationsextensions.org/ verwenden ). Dies prüft jedoch nur, ob der Wert eine Ganzzahl ist, und nicht, ob er ausgefüllt ist (daher benötigen Sie möglicherweise auch das Attribut [Erforderlich]).

Wenn Sie die unauffällige Validierung aktivieren, wird sie clientseitig validiert. Sie sollten jedoch auch Modelstate.Valid in Ihrer POST-Aktion verwenden, um sie abzulehnen, falls Javascript deaktiviert ist.

DataTypehat einen zweiten Konstruktor, der eine Zeichenfolge akzeptiert. Intern entspricht dies jedoch der Verwendung vonUIHint Attributs.

Das Hinzufügen eines neuen zentralen Datentyps ist nicht möglich, da die DataTypeAufzählung Teil des .NET-Frameworks ist. Das nächste, was Sie tun können, ist, eine neue Klasse zu erstellen, die von der erbt DataTypeAttribute. Anschließend können Sie einen neuen Konstruktor mit Ihrer eigenen DataTypeAufzählung hinzufügen .

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

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

Sie können auch über diesen Link gehen. Aber ich werde Ihnen empfehlen, Jquery für das gleiche zu verwenden.

Hallo versuche folgendes ....

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

SKRIPT

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

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