您可以要求两个表单字段与HTML5匹配吗？

有没有办法要求两个表单字段中的条目使用HTML5进行匹配？还是仍然必须使用JavaScript来完成？例如，如果您有两个密码字段，并且要确保用户在每个字段中输入了相同的数据，是否可以通过某些属性或其他编码来实现此目的？

并非完全通过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" />

您可以使用正则表达式输入模式（检查浏览器的兼容性）

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

一个使用最少的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>

将需要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>

不只是HTML5，还有一些JavaScript
单击[here] 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;

使用pattern和正则表达式的答案将用户密码以纯文本形式写入输入属性pattern='mypassword'。只有在开发人员工具打开的情况下，这才可见，但这仍然不是一个好主意。

使用模式检查匹配项的另一个问题是您可能希望使用模式检查密码的格式正确，例如字母和数字混合。

我还认为，如果用户在输入之间切换，这些方法将无法正常工作。

这是我的解决方案，它使用更多的JavaScript，但是在更新任一输入并设置自定义HTML有效性时执行简单的相等性检查。仍然可以测试两个输入的模式，例如电子邮件格式或密码复杂性。

对于真实页面，您可以将输入类型更改为“密码”。

<form>
    <input type="text" id="password1" oninput="setPasswordConfirmValidity();">
    <input type="text" id="password2" oninput="setPasswordConfirmValidity();">
</form>
<script>
    function setPasswordConfirmValidity(str) {
        const password1 = document.getElementById('password1');
        const password2 = document.getElementById('password2');

        if (password1.value === password2.value) {
             password2.setCustomValidity('');
        } else {
            password2.setCustomValidity('Passwords must match');
        }
        console.log('password2 customError ', document.getElementById('password2').validity.customError);
        console.log('password2 validationMessage ', document.getElementById('password2').validationMessage);
    }
</script>

正如其他答案中提到的那样，没有纯HTML5方式可以做到这一点。

如果您已经在使用JQuery，那么这应该可以满足您的需求：

$(document).ready(function() {
  $('#ourForm').submit(function(e){
      var form = this;
      e.preventDefault();
      // Check Passwords are the same
      if( $('#pass1').val()==$('#pass2').val() ) {
          // Submit Form
          alert('Passwords Match, submitting form');
          form.submit();
      } else {
          // Complain bitterly
          alert('Password Mismatch');
          return false;
      }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ourForm">
    <input type="password" name="password" id="pass1" placeholder="Password" required>
    <input type="password" name="password" id="pass2" placeholder="Repeat Password" required>
    <input type="submit" value="Go">
</form>