编写用户注册界面(友好型并通过js校验信息是否合法)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTip() {
// 1. 获取标签对象;
document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
}
function showPwdTip() {
// 1. 获取标签对象;
document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密码必须大于6位</b>';
}
function checkUser() {
//1. 离焦时判断用户名是否为空?
var name = document.getElementById('user').value;
// 2. 如果为空， 右边来一个红色的提示;
// 3. 如果不为空， 则取消所有提示;
if (name === ''){
document.getElementById('userTip').innerHTML = '<b style="color: #f10180">用户名不能为空</b>'
return false;
}else{
document.getElementById('userTip').innerHTML = '<b style="color: green"> ok </b>'
return true;
}
}
function checkPwd() {
// alert('离焦');
//1. 离焦时判断用户名是否为空?
var pwdLen = document.getElementById('pwd').value.length;
// 2. 如果为空， 右边来一个红色的提示;
// 3. 如果不为空， 则取消所有提示;
if (pwdLen < 6){
document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密码必须大于6位</b>'
return false;
}else{
document.getElementById('pwdTip').innerHTML = '<b style="color: green"> ok </b>'
return true;
}
}
</script>
<style>
#login {
width: 360px;
height: 360px;
/*border: 1px solid red;*/
text-align: left;
margin-left: 420px;
margin-right: 60px;
margin-top: 60px;
background: snow;
border: 1px;
}
#login2 {
text-align: left;
margin-left: 35px;
margin-right: 30px;
margin-top: 60px;
background: snow;
}
</style>
</head>
<body>
<div id="login" >
<h1 style="text-align: center;color: #f10180">用户注册</h1>
<hr>
<div id="login2">
<form action="#" method="get">
<input type="text" id='user' placeholder="输入用户名" name="username" onfocus="showUserTip()"
onblur="checkUser()">
<span id="userTip"></span><br/><br>
<input type="password" id="pwd" placeholder="输入密码" name="passwd" onfocus="showPwdTip()"
onblur="checkPwd()">
<span id="pwdTip"></span><br/><br>
<input type="submit" value="注册">
</form>
</div>
</div>
</body>
</html>
