Можете ли вы задать два поля формы для соответствия HTML5?

Ответ 1

Я уверен, что этого не существует. И это не должно быть достигнуто с JS. Почему бы не проверить их с помощью php/asp или любого другого серверного языка? Кажется, что они более защищены:)

ИЗМЕНИТЬ

Несколько лет спустя чистая проверка HTML5 все еще не удовлетворяет. Как отметил @Peteris, лучшим подходом является использование JavaScript для улучшения UX и проверки на стороне сервера, чтобы убедиться, что данные пользователя сформированы так, как ожидалось.

Большинство рамок нацелены таким образом; например: AngularJS и Ruby on Rails

Ответ 2

Не точно с проверкой HTML5, но немного JavaScript может решить проблему, следуйте приведенному ниже примеру:

<p>Password:</p>
<input name="password" required="required" type="password" id="password" />
<p>Confirm Password:</p>
<input name="password_confirm" required="required" type="password" id="password_confirm" oninput="check(this)" />
<script language='javascript' type='text/javascript'>
    function check(input) {
        if (input.value != document.getElementById('password').value) {
            input.setCustomValidity('Password Must be Matching.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>
<br /><br />
<input type="submit" />

Ответ 3

Вы можете использовать регулярные выражения Шаблоны ввода (установите флажок совместимость с браузером)

<input id="password" name="password" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Must have at least 6 characters' : ''); if(this.checkValidity()) form.password_two.pattern = this.value;" placeholder="Password" required>

<input id="password_two" name="password_two" type="password" pattern="^\S{6,}$" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');" placeholder="Verify Password" required>

Ответ 4

Простым решением с минимальным javascript является использование шаблона атрибута html (поддерживается большинством современных браузеров). Это работает, устанавливая шаблон второго поля на значение первого поля.

К сожалению, вам также необходимо избежать регулярного выражения, для которого не существует стандартной функции.

<form>
    <input type="text" oninput="form.confirm.pattern = escapeRegExp(this.value)">
    <input name="confirm" pattern="" title="Fields must match" required>
</form>
<script>
    function escapeRegExp(str) {
      return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    }
</script>

Ответ 5

JavaScript потребуется, но количество кода можно свести к минимуму с помощью промежуточного элемента <output> и обработчика oninput для выполнения сравнения (шаблоны и валидация могут увеличить это решение, но здесь не показаны ради простоты):

<form oninput="result.value=!!p2.value&&(p1.value==p2.value)?'Match!':'Nope!'">
  <input type="password" name="p1" value="" required />
  <input type="password" name="p2" value="" required />
  <output name="result"></output>
</form>

Ответ 6

Не только HTML5, но и JavaScript
Нажмите [здесь] https://codepen.io/diegoleme/pen/surIK

HTML

    <form class="pure-form">
    <fieldset>
        <legend>Confirm password with HTML5</legend>

        <input type="password" placeholder="Password" id="password" required>
        <input type="password" placeholder="Confirm Password" id="confirm_password" required>

        <button type="submit" class="pure-button pure-button-primary">Confirm</button>
    </fieldset>
</form>

JAVASCRIPT

var password = document.getElementById("password")
  , confirm_password = document.getElementById("confirm_password");

function validatePassword(){
  if(password.value != confirm_password.value) {
    confirm_password.setCustomValidity("Passwords Don't Match");
  } else {
    confirm_password.setCustomValidity('');
  }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;