validación de HTML5

Question

Me pregunto si HTML5 tiene alguna invalidación de formulario para entrada doble (escriba 2 contraseñas idénticas) y ¿puede escribir excepciones propias?

¡Gracias por adelantado!

Answer 1

Estoy seguro de que no es posible. Además, puede ser cubierto fácilmente por javascript, ¿por qué no usarlo en su lugar?

Esto funciona perfectamente bien:

<script language="javascript"> 
function checkPassword() { 
    if (document.pwForm.pw1.value != document.pwForm.pw2.value) { 
     alert ('The passwords do not match!'); 
     return false; 
    } 
} 
</script> 
<form action="filename.ext" name="pwForm" method="GET/POST"> 
    <input type="password" name="pw1" value=""><br /> 
    <input type="password" name="pw2" value=""><br /> 
    <input type="Submit" name="CheckPassword" value="Check Passwords" onClick="return checkPassword();"> 
</form> 

Answer 2

Si quieres algo un poco más bonito y HTML5-utilización, intente esto: http://www.html5rocks.com/en/tutorials/forms/html5forms/

<label>Password:</label> 
<input type="password" id="password" name="password"> 
<label>Confirm Password:</label> 
<input type="password" id="passwordconf" name="passwordconf" oninput="check(this)"> 
<script language='javascript' type='text/javascript'> 
function check(input) { 
    if (input.value != document.getElementById('password').value) { 
     input.setCustomValidity('The two passwords must match.'); 
    } else { 
     // input is valid -- reset the error message 
     input.setCustomValidity(''); 
    } 
} 
</script> 

prepares elaboradas mediante la adición de esto a tu CSS (abajo). Coloca un borde rojo alrededor de los campos de entrada ofensivos cuando no validan la validación HTML5.

:invalid { 
    border: 2px solid #ff0000; 
} 

Todo listo. Debería seguir usando una alerta() o una validación del lado del servidor para asegurarse de que el usuario ingrese ambas contraseñas correctamente. No confíe en nada del lado del cliente.

Answer 3

Tuve un problema similar, y para resolverlo con la API de HTML5 lo hice: establecí un patrón para que la contraseña contuviera al menos ocho letras y un número. A continuación, para hacerlos a juego que hice:

var password = document.querySelector('#password'), 
     passwordConfirm = document.querySelector('#password_confirm'); 

    [].forEach.call([password, passwordConfirm], function(el) { 
     el.addEventListener('input', function() { 
      if (!el.validity.patternMismatch) { 
       if (password.value === passwordConfirm.value) { 
        try{password.setCustomValidity('')}catch(e){} 
       } else { 
        password.setCustomValidity("Password and password confirm doesn\'t match") 
       } 
      } 
     }, false) 
    }); 

donde con el.validity.patternMismatch de verificación de la validez patrón primero y luego comprobar la validez de los dos. Aquí está mi contraseña ingresada con el patrón.

<input type="password" pattern="^((?=.*(\d|\W))(?=.*[a-zA-Z]).{8,})$" id="password" />

Answer 4

Gracias Kicker, que era muy útil.

Lo extendí un poco para hacer que la contraseña y la contraseña confirmen que las entradas no son válidas tan pronto como ingresas la entrada.

var password = document.querySelector(' input[name=usr_password]'); 
var passwordConfirm = document.querySelector(' input[name=usr_password_confirm]'); 
if (password && passwordConfirm) 
{ 
    [].forEach.call([password, passwordConfirm], function(el) { 
     el.addEventListener('input', function() { 
      if (el.validity.patternMismatch === false) { 
       if (password.value === passwordConfirm.value) { 
        try{ 
         password.setCustomValidity(''); 
         passwordConfirm.setCustomValidity(''); 

        } 
        catch(e){} 
       } 
       else { 
        password.setCustomValidity("The two passwords do not match"); 
       } 
      } 
      if ((password.checkValidity() && passwordConfirm.checkValidity()) === false) 
      { 
       password.setCustomValidity("The two passwords do not match, and they don't comply with the password rules."); 
       passwordConfirm.setCustomValidity("The two passwords do not match, and they don't comply with the password rules."); 
      } 
      else 
      { 
       password.setCustomValidity(''); 
       passwordConfirm.setCustomValidity(''); 

      } 
     }, false) 
    }); 
} 

Answer 5

Creo que esto es lo que estás buscando.

<p>Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" name="pwd1" onchange=" 
    this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : ''); 
    if(this.checkValidity()) form.pwd2.pattern = this.value; 
"></p> 
<p>Confirm Password: <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" name="pwd2" onchange=" 
    this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : ''); 
"></p> 

Esto hará la contraseña y volverá a escribir la validación de los campos de contraseña.

Answer 6

Otra opción es usar http://jqueryvalidation.org/validate/, si no le importa usar Jquery para hacer su trabajo sucio.

Salida http://jqueryvalidation.org/equalTo-method

<form id="myform"> 
    <label for="password">Password</label> 
    <input id="password" name="password" /> 
    <br/> 
    <label for="password_again">Again</label> 
    <input class="left" id="password_again" name="password_again" /> 
    <br> 
    <input type="submit" value="Validate!"> 
</form> 

<script> 
    $("#myform").validate({ 
    rules: { 
     password: "required", 
     password_again: { 
     equalTo: "#password" 
     } 
    } 
    }); 
</script> 

También puede escribir métodos más complicados, si es necesario: http://jqueryvalidation.org/category/plugin/