Forms 您可以要求两个表单字段与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" />

密码：

确认密码：

功能检查（输入）{
if（input.value！=document.getElementById（'password'）.value）{
setCustomValidity（'密码必须匹配'）；
}否则{
//输入有效--重置错误消息
input.setCustomValidity（“”）；
}
}

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

---

使用最少javascript的简单解决方案是使用html属性模式（大多数现代浏览器都支持）。这是通过将第二个字段的模式设置为第一个字段的值来实现的

不幸的是，您还需要转义regex，因为没有标准函数

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

函数escapeRegExp（str）{
返回str.replace（/[\-\[\]\/\{\\}（\）\*\+\？\.\\\^\$\\\\\\\\\\；]/g，“\$&”）；
}

将需要JavaScript，但通过使用中间

元素和

oninput

表单处理程序来执行比较，可以将代码量保持在最低限度（模式和验证可以增强此解决方案，但为了简单起见，此处未显示）：

---

不仅仅是HTML5，还有一点JavaScript
点击[此处]

HTML

---

使用模式和正则表达式的答案将用户密码以纯文本形式写入输入属性

pattern='mypassword'

。这只有在开发人员工具打开时才可见，但这似乎仍然不是一个好主意

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

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

下面是我的解决方案，它使用了更多的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>

函数setPasswordConfirmValidity（str）{
const password1=document.getElementById（'password1'）；
const password2=document.getElementById（'password2'）；
if（password1.value==password2.value）{
password2.setCustomValidity（“”）；
}否则{
password2.setCustomValidity（“密码必须匹配”）；
}
console.log（'password2 customError'，document.getElementById（'password2'）。validity.customError）；
console.log（'password2 validationMessage'，document.getElementById（'password2'）.validationMessage）；
}

正如在其他答案中提到的，没有纯HTML5的方法可以做到这一点

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

$（文档）.ready（函数（）{
$（'#ourForm'）。提交（函数（e）{
var form=此；
e、 预防默认值（）；
//检查密码是否相同
如果（$（'#pass1'）.val（）==$（'#pass2'）.val（））{
//提交表格
警报（“密码匹配，提交表单”）；
表单提交（）；
}否则{
//怨声载道
警报（“密码不匹配”）；
返回false；
}
});
});

好吧，这是一个很好的观点。但是，我也希望能够实现HTML5的方式，如果存在。我在HTML5中遇到的正则表达式模式匹配问题是，任何特殊字符都被匹配：password:Cat$confirm password:Cat@将在字段confirmation中生成一个匹配项，尽管我有不允许提交的验证脚本，但这为用户提供了一个错误的指示符。虽然这样做有效，这仍然是一个糟糕的答案，原因有两个：你声称这是一个只有html的解决方案，但事实并非如此，你没有解释它是如何工作的。这可能是真的。尽管这是一个糟糕的答案，但却是一个巧妙的解决方案。在第一个字段中输入值时，它将执行为该输入定义的密码模式检查。如果不符合您的pw模式，它将显示一条消息。如果它与您所需的模式匹配，它会将第二个pw字段的所需模式更改为用户输入的值。如果用户在第二个字段中输入内容，则必须是第一个字段中的值，否则将显示错误消息。很好。我正在考虑这是否会带来任何安全问题。我不认为是这样的……这里的诀窍是“form.password\u two.pattern=this.value”，它将使用在regexps@wvdz从来没有说过它是纯HTML，但为Clarity添加了浏览器兼容性链接我认为，
pattern
属性应该在
password\u two
字段中省略。与当前一样，如果您在
password\u two
字段中键入一个短于6个字符的密码，而将
password
保留为空-它将显示
请输入与上述相同的密码
验证消息。更令人困惑的是：如果您在两个字段中输入了完全相同的密码，即少于6个字符，则会发生同样的情况；我可以将函数直接放入处理程序，但我必须在确认上添加一个ID:
不像您的那样可读，但可以避免单独的脚本/函数。此代码是否会遇到iss
<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>

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

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;

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