Javascript Eingabefeld Validierung (nur Nummer)

Question

Ich möchte mein Eingabeelement akzeptieren nur Nummer. Ich möchte es in Echtzeit validieren und die Farbe des Etiketts rot werden lassen, wenn die Eingabe nicht 10-stellig ist.

Hilfe bitte auf meinem js Zustand. Vielen Dank.

function isNumberKey(evt) { 
 
    var charCode = (evt.which) ? evt.which : event.keyCode 
 

 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
 
    document.getElementById("lbltest").style.color = "red" 
 
    return false; 
 
    } else { 
 
    document.getElementById("lbltest").style.color = "green" 
 
    return true; 
 
    } 
 
}

<label id="lbltest">Test</label> 
 
<input name="txtTry" type="text" pattern=".{10,}" 
 
     minlength="10" maxlength="10" 
 
     onkeypress="return isNumberKey(event)">

Answer 1

var input=document.getElementById('input'), 
 
    label=document.getElementById('lbltest'); 
 

 
input.oninput=function(){ 
 
    var value=this.value; 
 
    var isnum = /^\d+$/.test(value); 
 
    if(isnum && value.length===10){ 
 
    label.style.color="green"; 
 
    }else{ 
 
     label.style.color="red"; 
 
    } 
 
     
 
    }

<label id="lbltest">Test </label> 
 
<input id="input" name="txtTry" type="text" minlength="10" maxlength="10">

Answer 2

jQuery Da macht es ein wenig einfacher Ereignisse zu behandeln, habe ich die Bibliothek integriert, um das Szenario zu lösen. Ich habe die Elementattribute behalten, die Sie auf eigene Nachfrage verwenden oder entfernen können.

$(document).ready(function() { 
 
    $('.validate').on('input', function(event) { 
 
    var $element = $(this); 
 
    var valid = true; 
 
    if ($element.attr('pattern')) { 
 
     var pattern = new RegExp($element.attr('pattern')); 
 
     valid = valid && pattern.test($element.val()); 
 
    } 
 
    if ($element.attr('minlength')) { 
 
     value = valid && $element.val().length >= $element.attr('minlength'); 
 
    } 
 
    if ($element.attr('maxlength')) { 
 
     value = valid && $element.val().length <= $element.attr('maxlength'); 
 
    } 
 
    if (!valid) { 
 
     $element.addClass('validation-error'); 
 
    } else { 
 
     $element.removeClass('validation-error'); 
 
    } 
 
    }); 
 
});

<style> 
 
.validation-error { border: 1px red solid; background: rgba(255, 0, 0, 0.25); } 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label id="lbltest">Test </label> 
 
<input id="input" class="validate" 
 
     name="txtTry" type="text" 
 
     minlength="10" maxlength="10" 
 
     pattern="^\d{10}$">

Answer 3

ändern Ihre Funktion wie folgt aus:

function isNumberKey(evt) 
{ 
    var charCode = (evt.which) ? evt.which : event.keyCode 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) 
    { 
    document.getElementById("lbltest").style.color="red" 
    return false; 
    } 
    else 
    { 
    if (document.getElementById("txtTry").value.length < 10) 
    { 
     document.getElementById("lbltest").style.color="red" 
    } 
    else{ 
     document.getElementById("lbltest").style.color="green" 
    } 

    return true; 
    } 

}

dann die HTML wie folgt ändern:

<label id="lbltest">Test </label> 
<input name="txtTry" id="txtTry" type="text" pattern=".{10,}" minlength="10" maxlength="10" onkeydown="return isNumberKey(event)">