So lassen Sie nur Zahlen im Textfeld in mvc4 razor zu

83

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?

Vaibhav Shah
quelle
1
Sie können dies nicht tun, da Datenanmerkungen aufgerufen werden, wenn Sie Ihr Formular senden, und nicht, wenn Sie Daten in Ihre
Textfelder
Während dies zutrifft, können Sie die Validierungsregeln für HTML5-Eingabetypen verwenden (sofern dies vom Browser unterstützt wird). funktioniert in diesem Fragenszenario.
Hubson Bropa
Verwenden Sie jQuery mit einer CSS-Klasse
Mögliches Duplikat von Int oder Number DataType für das Validierungsattribut
DataAnnotation
@KarthikChintala Das ist falsch. Die Datenanmerkungen werden auch verwendet, um beim Rendern des Formulars clientseitige jQuery-Validierungen und Eingabetypen für verschiedene Felder zu ermitteln.
ProfK

Antworten:

101

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

Hubson Bropa
quelle
9
aka @ Html.TextBoxFor (i => i.Port, neu {@type = "number"})
Lee Richardson
2
Sie können auch "-" und "+" eingeben, die Zeichen und keine Zahlen sind.
Mr. Blond
Dies wird zumindest teilweise in allen gängigen Browsern außer Opera Mini unterstützt.
Tobias J
Neben den Zeichen "-" und "+" können Sie auch das Zeichen "e" eingeben. Ich habe Data Annotation + Regex verwendet, wie von Donal Lafferty in seiner Antwort angegeben.
Alejandro Zuleta
60

Verwenden Sie einen regulären Ausdruck, z

[RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")]
public int Count { get; set; }
Donal Lafferty
quelle
2
Dies sollte die Antwort sein.
51
@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.

diegosasw
quelle
Ziemlich ordentliche Lösung für die Front-End-Validierung. Vielen Dank, um meine Zeit zu sparen @realaValoro :-)
Asif Mehmood
Woher kommt die span4-Klasse?
Mischka
Es ist nur ein Beispiel für die Angabe einer CSS-Klasse für ein Textfeld.
Diegosasw
15

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>
Shwet
quelle
Javascript-Ereignis ist nicht definiert Firefox
Dies funktioniert auf vielen Smartphones nicht, da das Tastendruckereignis nicht auf allen Mobiltelefonen verfügbar ist.
Repo
es wurde für MVC4 razr
Shwet
9

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; }
TAHA SULTAN TEMURI
quelle
8

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);
    }
});
Deependra Singh
quelle
Dies funktioniert auf vielen Smartphones nicht, da das Tastendruckereignis nicht auf allen Mobiltelefonen verfügbar ist.
Repo
5

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>
avc_004
quelle
Ich weiß nicht, warum sie es nicht als Antwort markiert haben, die wie ein Zauber
wirkt
Dies funktioniert auf vielen Smartphones nicht, da das Tastendruckereignis nicht auf allen Mobiltelefonen verfügbar ist.
Repo
3

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

Web-Entwickler
quelle
2

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.

Karthik Chintala
quelle
Nicht alle Codepfade geben einen Wert zurück und es funktioniert nicht für mich
Dies funktioniert auf vielen Smartphones nicht, da das Tastendruckereignis nicht auf allen Mobiltelefonen verfügbar ist.
Repo
2

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

<input id="txtMyDecimal" min="0" step="any" type="number">
Chris J.
quelle
Und wie macht man das mit dem HTMLhelper in Rasiermesser?
LarryBud
Ich habe versucht, Razor zu verwenden, aber nachdem ich lange gesucht hatte, konnte ich keine Lösung finden, die so sauber war.
Chris J
1

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.

Céryl Wiltink
quelle
0

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.

Bhushan Firake
quelle
0

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;
   };
ar.gorgin
quelle
Dies funktioniert auf vielen Smartphones nicht, da das Tastendruckereignis nicht auf allen Mobiltelefonen verfügbar ist.
Repo
0
@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>
}
Rasika Grünkohl
quelle
-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;
}}
Gautam Prajapati
quelle
2
Wie wäre es mit einer kleinen Beschreibung Ihrer Lösung?
Jack Flamp
Normalerweise ist es besser, eine Lösung zu erklären, als nur einige Zeilen anonymen Codes zu veröffentlichen. Sie können lesen, wie ich eine gute Antwort schreibe und auch vollständig codebasierte Antworten
erkläre