Come permettere solo i numeri nella casella di testo in mvc4 rasoio

Ho 3 casella di testo che assume valori codice postale & numero di cellulare & residenziale numero.
Ho la soluzione per permettere solo numero nella casella di testo utilizzando jquery dal Muggito post.

Vorrei fare un EditFor textbox accettare solo numeri

ma si può fare utilizzando le annotazioni di dati come sto usando MVC4 rasoio ?

  • non perché le annotazioni di dati vengono chiamati quando si invia il modulo, non quando inserisci i dati per le vostre caselle di testo
  • mentre questo è vero, è possibile utilizzare l’HTML5 di input tipi di regole di convalida (se supportato dal browser). lavora a questa domanda scenario.
  • Utilizzare jQuery con una classe css
  • Possibile duplicato di Int Numero o il Tipo di dati per DataAnnotation convalida attributo
  • Che non è corretto. Le annotazioni di dati sono utilizzati anche per la resa del modulo, per determinare lato client jQuery convalide e tipi di input per i diversi settori.
InformationsquelleAutor vaibhav shah | 2013-02-06



14 Replies
  1. 95

    stavo solo giocando intorno con HTML5 input type=numero. mentre la sua non è supportato da tutti i browser mi aspetto è il modo di andare avanti per gestire il tipo di trattamento specifico (numero di ex). abbastanza semplice da fare con il rasoio (ex VB)

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

    e grazie a Lee Richardson, c#, in modo

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

    al di là della portata del problema, ma si potrebbe fare lo stesso approccio con qualsiasi html5 tipo di ingresso

    • aka @Html.TextBoxFor(i => io.Porta nuova { @type = “number” })
    • È anche possibile ingresso “-” e “+” che sono i caratteri non numero.
    • Questo è almeno parzialmente supportato in tutti i principali browser tranne Opera Mini.
    • Oltre a “-” e “+” caratteri che è possibile immettere il carattere “e”. Ho usato i Dati di Annotazione + regex come sottolineato da Donal Lafferty nella sua risposta.
  2. 56

    Utilizzare un’espressione regolare, ad esempio

    [RegularExpression("([1-9][0-9]*)", ErrorMessage = "Count must be a natural number")]
    public int Count { get; set; }
    • Questa dovrebbe essere la risposta.
  3. 40
    @Html.TextBoxFor(m => m.PositiveNumber, 
                          new { @type = "number", @class = "span4", @min = "0" })

    in MVC 5 con il Rasoio è possibile aggiungere qualsiasi input html attributo dell’oggetto anonimo, come per esempio qui sopra, per consentire solo i numeri positivi nel campo di immissione.

    • Abbastanza carino soluzione di front end di Convalida. Grazie a salvare il mio tempo @realaValoro 🙂
  4. 15

    nella casella di testo scrivere questo codice onkeypress="return isNumberKey(event)"
    e la funzione di questo è al di sotto.

    <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>
    • eventi javascript non è definito firefox
    • nel mio caso ‘evt’ è solo l’ingresso di per sé, non l’evento keypress args…
    • Questo non funzionerà su un sacco di smartphone come l’evento keypress non è disponibile su tutti i cellulari.
    • questa fu la risposta di MVC4 razr
  5. 9

    Si prega di utilizzare il Tipo di dati attribue ma questo, tranne i valori negativi, in modo che l’espressione regolare al di sotto di evitare questo

       [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; }
  6. 8

    Questo ha funzionato per me :

    <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);
        }
    });
    • Questo non funzionerà su un sacco di smartphone come l’evento keypress non è disponibile su tutti i cellulari.
  7. 5

    Utilizzare questa funzione nello script e mettere un arco vicino casella di testo per visualizzare il messaggio di errore

        $(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>
    • con voto positivo per la soluzione più semplice .Non so perchè non hanno contrassegnato come risposta a lavorare come un fascino
    • Questo non funzionerà su un sacco di smartphone come l’evento keypress non è disponibile su tutti i cellulari.
  8. 2

    Qui è il javascript che permette di inserire solo numeri.

    Sottoscrivere onkeypress evento per il controllo textbox.

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

    Qui è il javascript per:

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

    Spero che ti aiuta.

    • Non tutti i percorsi del Codice restituire un valore, e non funziona per me
    • Questo non funzionerà su un sacco di smartphone come l’evento keypress non è disponibile su tutti i cellulari.
  9. 1

    Forse è possibile utilizzare la funzione [Integer] data di annotazione (Se si utilizza il DataAnnotationsExtensions http://dataannotationsextensions.org/) . Tuttavia, questo servirà solo verificare se il valore è un numero intero, dall ‘ se viene compilato (Quindi potrebbe anche essere necessario l’attributo [Required]).

    Se si attiva Discreto Validazione, che convaliderà è clientside, ma si possono usare anche Modelstate.Valido nel tuo POST di azione per decadenza, nel caso in cui la gente ha Javascript disabilitato.

  10. 1

    per i valori decimali maggiore di zero, HTML5 funziona come segue:

    <input id="txtMyDecimal" min="0" step="any" type="number">
    • E come si fa a fare questo con il HTMLhelper nel rasoio?
    • Ho tentato di usare il Rasoio, ma dopo aver cercato per anni, non riuscivo a trovare una soluzione per la pulizia.
  11. 0

    DataType ha un secondo costruttore che accetta una stringa. Tuttavia, internamente, questo è in realtà la stessa utilizzando la UIHint attributo.

    Aggiunta di un nuovo nucleo Tipo di dati non è possibile, poiché il DataType enumerazione è parte della .NET framework. La cosa più vicina si può fare è creare una nuova classe che eredita dalla DataTypeAttribute. È quindi possibile aggiungere un nuovo costruttore con il proprio DataType enumerazione.

    public NewDataTypeAttribute(DataType dataType) : base(dataType)
     { }
    
    public NewDataTypeAttribute(NewDataType newDataType) : base (newDataType.ToString();

    Si può anche passare attraverso questo link. Ma io ti consiglio utilizzo di Jquery per la stessa.

  12. 0

    Hi provare il seguente….

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

    SCRIPT

    <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;
       };
    • Questo non funzionerà su un sacco di smartphone come l’evento keypress non è disponibile su tutti i cellulari.
  13. -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;
    }}

Lascia un commento