本篇文章给大家带来的内容是关于javascript如何实现用户注册界面(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
1.css代码
*{ margin: 0; padding: 0; } .block{ position: relative; margin: 0 auto; margin-top: 80px; width: 710px; height: 500px; border: 1px solid rgba(29, 29, 29, 0.64); background: url("./img/logo2396.jpg")no-repeat; background-size: 100%; } .photo { position: absolute; z-index: 1; width: 710px; height: 500px; background-color: rgba(0, 0, 0, 0.71); } .biao{ margin-top: 20px; position: absolute; z-index: 2; margin-left: 150px; } li{ position: relative; padding-left:20px ; list-style: none; line-height: 70px; width: 400px; border: 1px solid white; margin:5px auto; } li input[type=text]{ padding-left: 20px; border-style: none; background: none; } input[type=submit]{ margin-left: 150px; border-style: none; font-size: 25px; color: white; background: none; } .d{ background-color: rgba(222, 53, 3, 0.71); } .txt{ line-height: 50px; width: 280px; font-size: 15px; color: white; } .error { position: absolute; z-index: 2; left: 150px; color: rgba(253, 253, 253, 0.4); font-size: 14px; }
2.html代码
<div class="block"> <div class="photo"></div> <div class="biao"> <form name="form"> <ul> <li><label style="color: white">账 号:</label><input class="txt" type="text"></li> <li><label style="color: white">密 码:</label><input class="txt" type="text"></li> <li><label style="color: white">确认密码:</label><input class="txt" type="text"></li> <li><label style="color: white">电话号码:</label><input class="txt" type="text"></li> <li><label style="color: white">邮 箱:</label><input class="txt" type="text"></li> <li class="d"><input id="sub" type="submit" value="注册"></li> </ul> </form> </div> </div>
3.js代码
var sub=document.getElementById("sub"); var txt=document.getElementsByClassName("txt"); var li=document.getElementsByTagName("li"); document.forms.form.onsubmit=function(){ yan(); var errl=document.getElementsByClassName("error").length; if(!errl){ return true; } return false; }; function yan(){ for(var i=0;i<txt.length;i++){ txt[i].focus(); } sub.focus(); } for(var i=0;i<txt.length;i++) { txt[i].index=i; txt[i].onfocus=function (){ if(this.parentElement.children[2]==undefined) return; this.parentElement.children[2].remove(); }; txt[i].onblur=function (){ switch (this.index){ case 0: if(this.value==""){ var s=document.createElement("span"); s.innerHTML="请输入账号"; s.className="error"; li[this.index].appendChild(s) } else{ var s=document.createElement("span"); s.innerHTML=""; s.className="sucess"; li[this.index].appendChild(s) } break; case 1: if(this.value==""){ var s=document.createElement("span"); s.innerHTML="请输入密码"; s.className="error"; li[this.index].appendChild(s) } else if(this.value.length<6||this.value.length>11) { var s=document.createElement("span"); s.innerHTML="密码错误"; s.className="error"; li[this.index].appendChild(s); txt[this.index].value=""; } else{ var s=document.createElement("span"); s.innerHTML=""; s.className="sucess"; li[this.index].appendChild(s) } break; case 2: if(this.value==""){ var s=document.createElement("span"); s.innerHTML="请再次确认密码"; s.className="error"; li[this.index].appendChild(s); txt[this.index].value=""; } else if(this.value!=txt[1].value){ var s=document.createElement("span"); s.innerHTML="请重新输入"; s.className="error"; li[this.index].appendChild(s); txt[this.index].value=""; } else{ var s=document.createElement("span"); s.innerHTML=""; s.className="sucess"; li[this.index].appendChild(s) } break; case 3: if(this.value==""){ var s=document.createElement("span"); s.innerHTML="请输入号码"; s.className="error"; li[this.index].appendChild(s) } else if(this.value.length!=11){ var s=document.createElement("span"); s.innerHTML="号码格式错误"; s.className="error"; li[this.index].appendChild(s) txt[this.index].value=""; } else{ var s=document.createElement("span"); s.innerHTML=""; s.className="sucess"; li[this.index].appendChild(s) } break; case 4: if(this.value==""){ var s=document.createElement("span"); s.innerHTML="请输入邮箱"; s.className="error"; li[this.index].appendChild(s) } else{ var s=document.createElement("span"); s.innerHTML=""; s.className="sucess"; li[this.index].appendChild(s) } break; } } }
相关推荐:
以上就是javascript如何实现用户注册界面(附代码)的详细内容,更多请关注php中文网其它相关文章!
已抢47678个
抢已抢3170个
抢已抢1140个
抢已抢1205个
抢已抢850个
抢已抢1568个
抢