JS之用户注册高亮显示

当用户注册的时候，符合要求的显示绿色框，不符合要求的显示红色框，并且下方有文本提示

知识点：onblur  当文本框失去焦点，会触发事件

<body>
账号：<input type="text" name="yonghu" onblur="fn1(this)" /><br>
<p></p>
<br>

密码：<input type="password" name="mima" onblur="fn2(this)" />
<br>
<p></p>
<script>
//需求：失去焦点的时候判断input文本框中的值，如果账号或密码在6-12个字符之间通过，否则报错
//获取事件源和相关元素
//绑定事件
//书写驱动程序
var pp=document.getElementsByTagName("p")[0];
var pp1=document.getElementsByTagName("p")[1];
function fn1(aaa){
if(aaa.value.length<6||aaa.value.length>12){
    aaa.className="wrong";
        pp.innerHTML="<p>请输入6-11位数字或字母</p>";
    
}else{
    aaa.className="right";
    pp.innerHTML="<p></p>";

}
}
function fn2(aaa){
    if (aaa.value.length<6||aaa.value.length>12) {
        aaa.className = "wrong";
        pp1.innerHTML="<p>请输入6-11位密码</p>";

    }else{
        aaa.className = "right";
        pp1.innerHTML="<p></p>";
    }
}
</script>
</body>

 

posted @ 2017-12-18 15:54  乖乖乖码  阅读(320)  评论(0)  编辑  收藏  举报