您需要两个表单字段来匹配 HTML5吗？

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

可以使用正则表达式 输入模式(选中 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>

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

不幸的是，您还需要转义正则表达式，因为对于正则表达式不存在标准函数。

<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

超文本标示语言

<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 (JAVASCRIPT)

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

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


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

Codepen

The answers that use pattern and a regex write the user's password into the input properties as plain text pattern='mypassword'. This will only be visible if developer tools are open but it still doesn't seem like a good idea.

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

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

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

对于一个真正的页面，您可以将输入类型更改为“ password”。

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

      <div className="form-group">
<label htmlFor="password">Password</label>
<input
value={password}
onChange={(e) => { setPassword(e.target.value) }}
type="password" id='password' name="password" required minLength={3} maxLength={255} />
</div>
<div className="form-group">
<label htmlFor="confirmPassword">Confirm Password</label>
<input
title='Passwords should be match'
pattern={`${password}`}
value={confirmPassword}
onChange={(e) => { setConfirmPassword(e.target.value) }}
type="password" id='confirmPassword' name="confirmPassword" required minLength={3} maxLength={255} />
</div>