DOM事件练习
注册页面： 要求：
-
包括三个输入框，分别是用户名，由4~8位数字、字母、下划线组成；密码，由6位数字组成以及再次输入密码。若用户不按组成规则设定，会在输入框后提示。
-
两处密码输入框后有小眼睛，当用户点击时实现密码的显示和隐藏。
-
以上三个输入框均按要求输入时点击注册按钮会显示用户注册成功的提示，否则会提示用户按要求注册。 程序如下：
span{display:none;color:red;} #pic{position:relative;width:160px;} #register{position:absolute;left:60px;} img{position:absolute;right:0;top: -3px;}
<div>
<input type="text">
<span>用户名格式不正确</span>
</div>
<div id="pic">
<input type="password">
<span>密码格式有误</span>
<img src="../图标/invisible.png">
</div>
<div id="pic">
<input type="password">
<span>两次密码不一致</span>
<img src="../图标/invisible.png">
</div>
<button id="register">立即注册</button>
<script>
var inputs=document.getElementsByTagName("input")
var spans=document.getElementsByTagName("span")
var regUser=/^\w{4,8}$/
var regPsd=/^\d{6}$/
var register=document.getElementById("register")
var imgs=document.getElementsByTagName("img")
//验证用户名
inputs[0].onblur=function(){
check(0,regUser)
}
//验证第一次密码
inputs[1].onblur=function(){
check(1,regPsd)
//验证第一次密码更改后与确认密码不一致问题
if(inputs[2].value!=""){
checksame()
}
}
//封装
function check(index,reg){
if(reg.test(inputs[index].value)){
spans[index].style.display="none"
}else{
spans[index].style.display="inline"
}
}
//验证第二次密码
inputs[2].onblur=checksame
function checksame(){
if(inputs[1].value==inputs[2].value){
spans[2].style.display="none"
}else{
spans[2].style.display="inline"
}
}
//验证立即注册
register.onclick=function(){
var condition1=inputs[0].value;
var condition2=inputs[1].value;
var condition3=inputs[1].value==inputs[2].value;
if(condition1&&condition2&&condition3){
alert("注册成功")
}else{
alert("请先完善有关信息")
}
}
//密码是否可见
var flag=true
imgs[0].onclick=function(){
eyes(0,1)
}
imgs[1].onclick=function(){
eyes(1,2)
}
function eyes(a,b){
if(flag){
imgs[a].src="../图标/visible.png"
inputs[b].type="text"
flag=false
}else{
imgs[a].src="../图标/invisible.png"
inputs[b].type="password"
flag=true
}
}
</script>
结果：
