您是否需要两个表单域才能与HTML5匹配？
您是否需要两个表单域才能与HTML5匹配？
提问于 2012-02-05 00:47:15
有没有办法使用HTML5要求两个表单域中的条目匹配？或者这仍然需要使用javascript来完成？例如，如果您有两个密码字段，并且希望确保用户在每个字段中输入了相同的数据，那么是否有一些属性或其他编码可以实现这一点？
回答 4
Stack Overflow用户
发布于 2013-09-19 19:36:20
不完全使用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" />Stack Overflow用户
发布于 2018-01-19 08:59:47
将需要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>Stack Overflow用户
发布于 2018-12-06 22:45:55
不仅仅是HTML5，还有一点JavaScript
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9142527
复制相关文章
相似问题