一篇登录框的代码

来源：互联网发布：java base64转换编辑：程序博客网时间：2024/05/21 05:24

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>6：表单练习</title>
<style type="text/css">
form{
margin: 0 auto;
width: 600px;
color:blue;
}
</style>
</head>
<body>
<form action="wow4.html" method="post" onsubmit="return checkAll()">
<h3>用户登录</h3>
用户名：<input type="text" name="name" id="name" onblur="checkName(this.value)" placeholder="用户名在4到8位之间"/>
<label id="name_msg"></label>
<br>
用户密码：<input type="password" name="pass"onchange="checkRePass()" id="pass"disabled onblur="checkPass(this.value)" placeholder="用户密码在4到8位之间"/>
<label id="pass_msg"></label>
<br>
重复密码：<input type="password" name="rePass" id="rePass"disabled onblur="checkRePass(this.value)" placeholder="请再次填写密码"/>
<label id="rePass_msg"></label>
<br>
<input type="submit"disabled id="mysub" value="提交"/>
<input type="reset" value="取消"/>
</form>
<script type="text/javascript">
var flagName = false;
var flagPass = false;
var flagRePass = false;
function checkName(flag){
var dom_inname = document.getElementById("name_msg");
if(flag.length<4||flag.length>8){
dom_inname.innerHTML="<img src='image/wrong.png'><font color='red'>用户名必须在4到8位之间</font>";
flagName = false;
document.getElementById("pass").disabled=true;
return;
}
dom_inname.innerHTML = "<img src='image/right.png'><font color='green'>用户名符合要求</font>";
flagName = true;
document.getElementById("pass").disabled=false;
}
function checkPass(flag){
var dom_inpass = document.getElementById("pass_msg");
if(flag.length<4||flag.length>8){
dom_inpass.innerHTML="<img src='image/wrong.png'><font color='red'>密码必须在4到8位之间</font>";
flagPass = false;
document.getElementById("rePass").disabled=true;
return;
}
dom_inpass.innerHTML = "<img src='image/right.png'><font color='green'>密码符合要求</font>";
flagPass = true;
document.getElementById("rePass").disabled=false;
}
function checkRePass(flag){
var dom_repass = document.getElementById("rePass_msg");
var dom_pass = document.getElementById("pass");
if(flag!=dom_pass.value||flag.length<4){
dom_repass.innerHTML="<img src='image/wrong.png'><font color='red'>密码不正确</font>";
flagRePass = false;
document.getElementById("mysub").disabled=true;
return;
}
dom_repass.innerHTML = "<img src='image/right.png'><font color='green'>密码正确</font>";
document.getElementById("mysub").disabled = false;
flagRePass = true;
}
function checkAll(){
return flagPass&&flagName&&flagRePass;
}
</script>
</body>
</html>

0 0