Hay una entrada donde el usuario debe ingresar una fecha en el formato dd.mm.yyyy., y necesito verificar que no escriba letras y otros caracteres innecesarios. Internet está lleno de ejemplos para una fecha ya hecha, en mi caso es necesario verificar al ingresar. Por ejemplo, el usuario presionó la tecla 2, apareció en la entrada, presionó z, nada cambió en la entrada. Presionado 3 - ok, presionado / - nada ha cambiado. Intenté escribir una expresión regular,
((0[1-9]{0,1})|([1-2][0-9]{0,1})|(3[0-1]{0,1}))\.{ 0.1}pero no puedo averiguar cómo verificar los datos después del punto. Necesito tu consejo.
Aquí hay un pequeño ejemplo
Acabo de actualizar sus etiquetas en cuestión, ya que su ejemplo vinculado estaba usando React, y la forma en que hace esto en JS simple sería ligeramente diferente.
En lugar de expresiones regulares, una opción un poco más fácil podría ser usar búsquedas, luego podría verificar qué caracteres válidos están disponibles en cada posición de carácter.
A continuación se muestra un ejemplo.
PD. No captará todo, p. 31 días en febrero y 29/28 para años bisiestos, etc. Por lo tanto, lo ideal es que vuelva a verificar después de ingresar la fecha por completo.
const {useState} = React; const anynum = '01234567890'; const num01 = '01'; const num31 = '0123'; const dot = '.'; const posValid = [ num31, //3 anynum, //1 dot, //. num01, //1 anynum, //2 dot, //. anynum, //2 anynum, //0 anynum, //2 anynum //2 ] function partsValid(s) { if (s.length > posValid.length) return false; //simple num check at pos for (let l = 0; l < s.length; l += 1) { const c = s[l]; if (!posValid[l].includes(c)) return false; } //check day if (s.length > 1) { const day = parseInt(s.slice(0, 2), 10); if (!(day >= 1 && day <= 31)) return false; } //check month if (s.length > 4) { const month = parseInt(s.slice(3, 5), 10); if (!(month >= 1 && month <= 12)) return false; } return true; } function App() { const [value, setValue] = useState(""); const onchange = (e) => { const nv = e.target.value; if (partsValid(nv)) setValue(nv); }; return ( <div> <input onChange={onchange} value={value} placeholder="dd.mm.yyyy" /> </div> ); } ReactDOM.render(<App/>, document.querySelector('#mount')); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="mount"></div>