Quiero hacer que los números de entrada sean números de 6 o 9 dígitos. Números de no menos de 6 dígitos, no entre 6 y 9 dígitos y no más de 9 dígitos. ¿Puedo saber cómo puedo hacer eso? Los códigos se insertarán a continuación
<label class="control-label col-sm-5" for="badgeid" style="margin-left: -50px;">ID:</label>; <div class="col-sm-4">; <p class="form-control-static" style="margin-top: -6px;"> <input type="number" class="form-control" id="secuid" name="secuid" min="0" placeholder="Enter ID" value=" $return_id"> <label class="control-label col-sm-6" style="color: red; font-size: 12px; margin-right: 20px;display: contents;">** 6 Digit ST Employee ID / 9 SecurityID **</label> </p> </div> <div class="col-sm-10"></div>A continuación se muestra Javascript.
var secuid = document.translot.secuid.value; if (secuid == null || secuid == ""){ alert("Please Insert the ID.") return false; }Use el atributo de pattern y esta expresión regular:
\b\d{6}\b|\b\d{9}\b /* Start with a non-word character then 6 consecutive digits then another non-word character OR start with a non-word character then 9 consecutive digits then another non-word character */ type="number" ignora el atributo de pattern , lo crea o no, así que use type="tel"
En el ejemplo, pruébelo observando los mensajes de advertencia que da, así como el mensaje de error no válido al intentar enviar algo que no esté dentro de los criterios.
<form> <input type='tel' pattern='\b\d{6}\b|\b\d{9}\b' required> <button>TEST</button> </form>Es bastante simple: use ' patrón ' junto con maxlength .
Forma 1:
<html> <body> <h1>The input pattern attribute</h1> <form action="/action_page.php"> <label for="secuid">Enter ID:</label> <input type="text" id="secuid" name="secuid" pattern="(\d{6}|\d{9})" maxlength="9" title="Enter ID"><br><br> <input type="submit"> </form> </body> </html>Ver JSFiddle (1) aquí
La forma 2 usa minlength=6, maxlength=9 y permite solo números: patrón="[0-9]+
<input type="text" id="secuid" name="secuid" pattern="[0-9]+" minlength="6" maxlength="9" title="Enter ID">Ver JSFiddle (2) aquí
Nota: no se necesita javascript