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 来做，创建你输入的类型号。像这样的东西：

    输入类型="数字" 名称="代码" id="idcode" min="0" max="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