web-dev-qa-db-fra.com

Comment autoriser uniquement les nombres dans la zone de texte dans mvc4 razor

J'ai 3 zone de texte qui prend les valeurs code postal et numéro de téléphone mobile et numéro résidentiel. J'ai eu la solution pour permettre uniquement le nombre dans la zone de texte en utilisant jquery de Bellow post.

Je voudrais faire un EditFor textbox accepte uniquement des nombres

mais pouvons-nous faire cela en utilisant des annotations de données comme j'utilise un rasoir MVC4?

asp.net-mvcasp.net-mvc-3asp.net-mvc-4
78
vaibhav shah

je jouais juste avec HTML5 type d'entrée = nombre. Bien que ce ne soit pas supporté par tous les navigateurs, je pense que c’est la voie à suivre pour gérer le traitement spécifique au type (numéro par exemple). assez simple à faire avec un rasoir (ex est VB)

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

et grâce à Lee Richardson, la voie C #

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

au-delà de la portée de la question, mais vous pouvez faire la même approche pour n’importe quel type d’entrée HTML5.

94
hubson bropa

Utilisez une expression régulière, par exemple.

[RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")]
public int Count { get; set; }
56
Donal Lafferty
@Html.TextBoxFor(m => m.PositiveNumber, 
                      new { @type = "number", @class = "span4", @min = "0" })

dans MVC 5 avec Razor, vous pouvez ajouter n’importe quel attribut d’entrée HTML dans l’objet anonyme, comme indiqué ci-dessus, pour autoriser uniquement les nombres positifs dans le champ de saisie.

39
iberodev

dans la zone de texte, écrivez ce code onkeypress="return isNumberKey(event)" et la fonction correspondante est ci-dessous.

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

Veuillez utiliser l’attribut Type de données, mais cela exclura les valeurs négatives afin que l’expression régulière ci-dessous l’évite

   [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; }
9
TAHA SULTAN TEMURI

Cela a fonctionné pour moi:

<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);
    }
});
8
Deependra Singh

Utilisez cette fonction dans votre script et placez une étendue près de la zone de texte pour afficher le message d'erreur.

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

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

Non, si j'ai bien compris votre question, une validation discrète ne fera qu'indiquer des erreurs. Le moyen le plus simple est d'utiliser le plugin jquery:

Plugin d'entrée masqué

3
webdeveloper

Voici le javascript qui vous permettra de ne saisir que des chiffres.

S'abonner à l'événement onkeypress pour la zone de texte.

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

Voici le javascript pour cela:

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

J'espère que ça vous aide.

2
Karthik Chintala

Peut-être pouvez-vous utiliser l'annotation de données [Integer] (Si vous utilisez DataAnnotationsExtensions http://dataannotationsextensions.org/ ). Cependant, ceci ne vérifiera que si la valeur est un entier, pas si elle est renseignée (vous aurez donc peut-être aussi besoin de l'attribut [Obligatoire]).

Si vous activez la validation discrète, il le validera côté client, mais vous devrez également utiliser Modelstate.Valid dans votre action POST pour le refuser au cas où le code Javascript serait désactivé.

1
Céryl Wiltink

pour les valeurs décimales supérieures à zéro, HTML5 fonctionne comme suit:

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

Salut essayez ce qui suit ....

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

SCÉNARIO

<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;
   };
0
ar.gorgin

DataType a un deuxième constructeur qui prend une chaîne. Cependant, en interne, cela revient à utiliser l'attribut UIHint.

L'ajout d'un nouveau type de données DataType n'est pas possible car l'énumération DataType fait partie du framework .NET. La chose la plus proche que vous puissiez faire est de créer une nouvelle classe qui hérite de la variable DataTypeAttribute. Ensuite, vous pouvez ajouter un nouveau constructeur avec votre propre énumération DataType.

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

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

Vous pouvez également passer par this link. Mais je vous recommanderai d’utiliser Jquery pour la même chose.

0
Bhushan Firake
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;
}}
0
Gautam Prajapati