JS之用户注册高亮显示

Posted 2020-10-18 凉白开的你

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于JS之用户注册高亮显示的主要内容，如果未能解决你的问题，请参考以下文章

外贸建站之网站导航栏菜单高亮JS实现代码分享