在前端開發(fā)中，表單設(shè)計(jì)是很重要的一部分。其中密碼確認(rèn)驗(yàn)證是使用頻率比較高的一種驗(yàn)證方式，下面我們來介紹一下如何使用HTML代碼實(shí)現(xiàn)密碼確認(rèn)驗(yàn)證。

<form>
<label>請(qǐng)輸入密碼:</label>
<input type="password" name="password" required></br>
<label>請(qǐng)?jiān)俅屋斎朊艽a:</label>
<input type="password" name="password_confirm" required oninput="check(this)"></br>
<p id="message"></p>
</form>
<script>
function check(input) {
if(input.value != document.getElementsByName('password')[0].value) {
document.getElementById('message').style.color = 'red';
document.getElementById('message').innerHTML = '兩次密碼輸入不一致！';
return false;
} else {
document.getElementById('message').style.color = 'green';
document.getElementById('message').innerHTML = '密碼輸入正確！';
return true;
}
}
</script>

上面的代碼中，我們使用了兩個(gè)input標(biāo)簽分別用于輸入密碼和再次輸入密碼。其中，'oninput="check(this)"'的作用是當(dāng)再次輸入密碼的值發(fā)生改變時(shí)立即調(diào)用check()函數(shù)進(jìn)行比較驗(yàn)證。如果兩次輸入的密碼不相同，則顯示"兩次密碼輸入不一致！"的錯(cuò)誤提示信息。如果兩次密碼輸入相同，則顯示"密碼輸入正確！"的提示信息。