<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>密码框的显示与隐藏</title>
<link href="css/login.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="#" method="post">
<h2 align="center" style="line-height: 16px;">登录页面</h2>
<hr />
<p>
<span>账号：</span>
<input type="text" id="user" name="username" value="admin" class="num"/>
<span id="s_username" class="error"></span>
</p>
<p>
<span>密码：</span>
<label for="username">
<img src="images/close.png" alt="" id="eye" class="a">
</label>
<input type="password" id="pwd" name="pwd" class="pass"/>
<span id="s_password" class="error"></span>
</p>
<br />
<p>
<input type="submit" class="btn01" value="登录" />
<input type="button" class="btn02" value="注册" />
</p>
</form>
<script>
window.onload=function (){
//1 给表单绑定onsubmint事件
document.getElementById("form").onsubmit=function (){
return checkUsername()&&checkPassword();//校验用户名密码是否正确
}
document.getElementById("username").onblur=checkUsername;
document.getElementById("password").onblur=checkPassword;
}
function checkUsername() {
var username=document.getElementById("username");
var reg=/^\w{6,12}$/;//匹配规则：以单词开头开的6至12位、任意字符结尾的字符
var flag=reg.test(username);
var s_username=document.getElementById("s_username");
if(flag){
s_username.innerText="";
}else {
s_username.innerHTML="用户名格式有误";
}
return flag;
}
function checkPassword() {
var password=document.getElementById("password");
var reg=/^\w{6,12}$/;//匹配规则：以单词开头开的6至12位、任意字符结尾的字符
var flag=reg.test(password);
var s_username=document.getElementById("s_password");
if(flag){
s_username.innerText="";
}else {
s_username.innerHTML="密码输入有误";
}
return flag;
}
var eye=document.getElementById('eye');
var pwd=document.getElementById('pwd');
var flag=0;
eye.onclick=function (){
if(flag===0)
{
pwd.type='text';
eye.src='images/open.png';
flag=1;//赋值操作
}
else{
pwd.type='password';
eye.src='images/close.png';
flag=0;
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>密码框的显示与隐藏</title>
<link href="css/login.css" type="text/css" rel="stylesheet" />
</head>
<body>
<form action="#" method="post">
<h2 align="center" style="line-height: 16px;">登录页面</h2>
<hr />
<p>
<span>账号：</span>
<input type="text" id="user" name="username" value="admin" class="num"/>
<span id="s_username" class="error"></span>
</p>
<p>
<span>密码：</span>
<label for="username">
<img src="images/close.png" alt="" id="eye" class="a">
</label>
<input type="password" id="pwd" name="pwd" class="pass"/>
<span id="s_password" class="error"></span>
</p>
<br />
<p>
<input type="submit" id="form" class="btn01" value="登录"/>
<input type="button" class="btn02" value="注册" />
</p>
</form>
<script>
window.onload=function (){
//1 给表单绑定onsubmint事件
document.getElementById("form").onclick=function (){
return checkUsername()&&checkPassword();//校验用户名密码是否正确
}
document.getElementById("user").onblur=checkUsername;
document.getElementById("pwd").onblur=checkPassword;
}
function checkUsername() {
var username=document.getElementById("username");
var reg=/^\w{6,12}$/;//匹配规则：以单词开头开的6至12位、任意字符结尾的字符
var flag=reg.test(username);
var s_username=document.getElementById("s_username");
if(flag){
s_username.innerText="";
}else {
s_username.innerHTML="用户名格式有误";
}
return flag;
}
function checkPassword() {
var password=document.getElementById("password");
var reg=/^\w{6,12}$/;//匹配规则：以单词开头开的6至12位、任意字符结尾的字符
var flag=reg.test(password);
var s_username=document.getElementById("s_password");
if(flag){
s_username.innerText="";
}else {
s_username.innerHTML="密码输入有误";
}
return flag;
}
var eye=document.getElementById('eye');
var pwd=document.getElementById('pwd');
var flag=0;
eye.onclick=function (){
if(flag===0)
{
pwd.type='text';
eye.src='images/open.png';
flag=1;//赋值操作
}
else{
pwd.type='password';
eye.src='images/close.png';
flag=0;
}
}
</script>
</body>
</html>