Question

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

Answer 1

不完全符合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" />

Answer 2

您可以使用正则表达式输入模式（选中browser compatibility）

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

Answer 3

使用最小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>

Answer 4

需要使用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>

Answer 5

不仅是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;

Answer 6

使用模式和正则表达式的答案将用户密码作为纯文本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>

Answer 7

正如其他答案中提到的那样，没有纯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>

您是否需要两个表单字段才能与HTML5匹配？

7 个答案: