The content of this article is about how to implement the user registration interface in JavaScript (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
##1.css code*{ 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; }
<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>
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; } } }
js implements the login and registration interface
ajax implements the complete process of registering user names
Use Ajax and forms to implement the functions required to register users
The above is the detailed content of How to implement user registration interface in javascript (with code). For more information, please follow other related articles on the PHP Chinese website!