Проверка HTML5

Question

Интересно, есть ли в HTML5 подтверждение формы для двойной записи (напишите 2 идентичных пароля) и можете ли вы написать собственные исключения?

Спасибо заранее!

Answer 1

Если вы хотите что-то более приятное и использующее HTML5, попробуйте это: 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>

Сделайте это модным, добавив это в свой CSS (ниже).Он ставит красную рамку вокруг ошибочных полей ввода, когда они не проходят проверку HTML5.

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

Все сделано.Вам все равно следует использовать alert () или проверку на стороне сервера, чтобы убедиться, что пользователь правильно вводит оба пароля.Не полагайтесь ни на что на стороне клиента.

Answer 2

У меня была похожая проблема, и для ее решения с помощью API-интерфейса HTML5 я сделал это: установил шаблон для пароля, который должен содержать не менее восьми букв и цифр. Затем, чтобы привести их в соответствие, я сделал:

    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)
    });

где с el.validity.patternMismatch сначала проверьте правильность шаблона, а затем проверьте правильность двух. Вот мой пароль для ввода с шаблоном.

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

Answer 3

Я совершенно уверен, что это невозможно.Кроме того, это может быть легко покрыто JavaScript, так почему бы не использовать его вместо этого?

Это прекрасно работает:

<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 4

Другой вариант - использовать http://jqueryvalidation.org/validate/,, если вы не возражаете против использования Jquery для своей грязной работы.

Проверьте 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>

Вы можететакже, если необходимо, напишите более сложные методы: http://jqueryvalidation.org/category/plugin/

Answer 5

Я думаю, что это то, что вы ищете.

<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>

Это выполнит проверку полей пароля и введите пароль заново.

Answer 6

Спасибо, Кикер, это было действительно полезно.

Я немного расширил его, чтобы пароль и пароли подтверждения ввода были недействительными, как только начался ввод данных.

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)
    });
}