文档事件案例:注册条件判断
#6.22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册用户案例</title>
<style>
.borderGreen {
border: 2px solid lightgreen;
}
.colorGreen {
color: lightgreen;
}
.borderRed {
border: 2px solid red;
}
.colorRed {
color: red;
}
</style>
</head>
<body>
<p>
<span>手机号:</span>
<input type="text" class="username">
<span class="userNameSpan"></span>
</p>
<p>
<span>密码:</span>
<input type="text" class="password">
<span class="passwordSpan"></span>
</p>
<button disabled>提交</button>
<script>
var userNameInput = document.querySelector('.username');
var passwordInput = document.querySelector('.password');
var userNameSpan = document.querySelector('.userNameSpan');
var passwordSpan = document.querySelector('.passwordSpan');
var but = document.querySelector("button");
function check() {
if (userNameSpan.innerHTML == '正确' && passwordSpan.innerHTML == '正确') {
//删除disabled按钮
but.removeAttribute('disabled');
} else {
//添加disabled按钮
but.setAttribute('disabled', 'disabled');//注意参数
}
}
userNameInput.onblur = function () {
var userName = userNameInput.value;
if (userName.length == 11) { //小心
userNameInput.setAttribute('class', 'borderGreen');
userNameSpan.innerHTML = '正确';
userNameSpan.setAttribute('class', 'colorGreen');
} else {
userNameInput.setAttribute('class', 'borderRed');
userNameSpan.innerHTML = '格式错误!';
userNameSpan.setAttribute('class', 'colorRed');
}
check();
}
passwordInput.onblur = function () {
var pass = passwordInput.value;
if (pass.length > 6 && pass.length < 12) {
passwordInput.setAttribute('class', 'borderGreen');
passwordSpan.innerHTML = '正确';
passwordSpan.setAttribute('class', 'colorGreen');
} else {
passwordInput.setAttribute('class', 'borderRed');
passwordSpan.innerHTML = '密码长度需要6-12位!';
passwordSpan.setAttribute('class', 'colorRed');
}
check();
}
</script>
</body>
</html>