Home / Questions / 70351
Accepted
omaza1990
Asked: 2020-05-17 06:04:04 +0800 CST 2020-05-17 06:04:04 +0800 CST

Проверка входного текстового поля - должно принимать только числа - Javascript

  • 772

Поле inputв форме:

<td align=right>Cod.Postal:</td><td align=left><input type="text" name="codigo" id="idcodigo" maxlength="5"></td>

Вы должны уметь писать только цифры (0-9).

    window.addEventListener("load", function() {
    miformulario.codigo.addEventListener("keypress", function(){ 
        return soloNumeros(event);
        }, false);
    });

    //Solo permite introducir números.
    function soloNumeros(e){
    var key = window.event ? e.which : e.keyCode;
    if (key < 48 || key > 57) {
        //Usando la definición del DOM level 2, "return" NO funciona.
        e.preventDefault();
    }
}

Функция ValidarCP:

//Validar el CP.
function validarCP(){
    //Eliminamos la clase error asignada al elemento CP.
    document.getElementById("idcodigo").className="";
    var valor = document.getElementById("idcodigo").value;
    var patron = /^\d{5}$/;
    if (patron.test(document.getElementById("idcodigo").value) && (!isNaN(valor))){
        document.getElementById("idcodigo").className="correcto";   
        return true;
    }else{
        //Situamos el foco en el campo idcodigo y le asignamos la clase error.
        alert("El código debe tener al menos 5 digitos.\n");
        document.getElementById("idcodigo").focus();
        document.getElementById("idcodigo").className="error";  
        return false;
    }
}

Как бы вы назначили эту функцию ValidarCP полю «код»? С событием onblur? Я бы хотел, чтобы при потере фокуса он проверял, есть ли 5 ​​цифр, если есть, то ничего не происходило, если не было 5 цифр, показывал сообщение (alert()) и делал фон поля красным .

стили.css

.error{
    background-color: red;
}
javascript

4 Answers

  1. Что происходит, так это то, что вы должны проверить ввод в JavaScript, даже если вы вернете false, он не знает, что делать, вам нужно добавить, e.preventDefault()чтобы теперь он не позволял писать символы, которые не имеют тип число

    miFormulario = document.querySelector('#miFormulario');
miFormulario.codigo.addEventListener('keypress', function (e){
	if (!soloNumeros(event)){
  	e.preventDefault();
  }
})

//Solo permite introducir numeros.
function soloNumeros(e){
    var key = e.charCode;
    console.log(key);
    return key >= 48 && key <= 57;
}
    <form name='miFormulario' id='miFormulario'>
<input type="text" name="codigo" id="idcodigo" maxlength="5">
</form>

    Я взял ваш код, удалил кое-что лишнее и добавил проверкуpreventDefault()

    Ваше здоровье

    • 7
  2. Best Answer

    Использование определения уровня DOM 2 не returnработает так, как вы ожидаете. Вы должны использовать Event.preventDefault()вместо этого.

    Наконец, условие должно быть противоположным тому, которое вы поставили:

    window.addEventListener("load", function() {
  miformulario.codigo.addEventListener("keypress", soloNumeros, false);
});

//Solo permite introducir numeros.
function soloNumeros(e){
  var key = window.event ? e.which : e.keyCode;
  if (key < 48 || key > 57) {
    e.preventDefault();
  }
}
    <form name="miformulario">
  <td align=right>Cod.Postal:</td><td align=left><input type="text" name="codigo" id="idcodigo" maxlength="5"></td>
</form>

    • 6

  3. Вы можете сделать это только с помощью html, создайте свой ввод типа номера. Что-то вроде этого:

    тип ввода = «число», имя = «код», идентификатор = «идентификатор», мин = «0», макс = «9»

    • 2

  4. Вот что-то проще. Приветствие

    <!DOCTYPE html>
<html>

<body>
  <h1>SOLO NUMEROS SIMPLE</h1>
  <div>
    <input type="input" name="ESP" onKeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;">
  </div>
</body>

</html>

    • 0