Проверка HTML5
Интересно, имеет ли HTML5 какое-либо подтверждение формы для двойного ввода (напишите 2 одинаковых пароля) и можете ли вы написать собственные исключения?
Thanx заранее!
Ответы
Ответ 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() или серверной проверки, чтобы гарантировать, что пользователь правильно вводит оба пароля. Не полагайтесь на клиентскую сторону.
Ответ 2
У меня была аналогичная проблема, и для ее решения с помощью HTML5 api я сделал это: установил шаблон для пароля, содержащий как минимум восемь букв и число. Затем, чтобы сделать их соответствие, я сделал:
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" />
Ответ 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>
Ответ 4
Спасибо Kicker, это было действительно полезно.
Я немного расширил его, чтобы ввести пароль и пароль для подтверждения ввода, как только вводится ввод.
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)
});
}
Ответ 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>
Это будет выполнять проверку пароля и повторного ввода паролей.
Ответ 6
Другой вариант - использовать 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/