js 实现 两个input密码确认框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>后盾人</title>
</head>
<body>
<input type="text" name="password" />
<input type="text" name="confirm_password" />
<br />
<span name="msg"></span>
<script>
function query(name) {
return document.querySelector(`[name='${name}']`)
};
console.log(query('password'));
let inputs = document.querySelectorAll("[name='password'],[name='confirm_password']");
[...inputs].map(item => {
item.addEventListener("keyup", function() {
let msg = '';
if (query('password').value !== query("confirm_password").value || query('password').value.length < 5) {
msg = '两次密码不一致 或密码长度小于5位'
}
query('msg').innerHTML = msg;
});
});
</script>
</body>
</html>
两次密码输入的不一致：
两次密码输入的一致 ：
两次密码一致，但小于5位 ：
