Detailed example of js implementation of login and registration interface

This article mainly introduces the js implementation of the login and registration interface in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Complete the HTML+CSS+JS of the login and registration page. The input items checked include:

Username 6-12 digits

The first letter cannot be a number

Can only contain letters and numbers

Password 6-12 digits

Whether the two passwords on the registration page are consistent

html code:

 
 
 
 
 





 
登陆

 

  
 
 

  
 
 


 

  登陆    
  
 

css code:

*{
 margin: 0;
 padding: 0;
 font-family: 微软雅黑;
 font-size: 12px;
}
.box{
 width: 390px;
 height: 320px;
 border: solid 1px #ddd;
 background: #FFF;
 position: absolute;
 left: 50%;
 top:42%;
 margin-left: -195px;
 margin-top: -160px;
 text-align: center;
}
.box h2{
 font-weight: normal;
 color:#666;
 font-size: 16px;
 line-height: 40px;
 overflow: hidden;
 text-align: center;
 border-bottom: solid 1px #ddd;
 background: #f7f7f7;
}
.input_box{
 width:350px;
 padding-bottom: 15px;
 margin: 0 auto;
 overflow: hidden;
}

javascript code:

function fnLogin() {
 var oUname = document.getElementById("uname")
 var oUpass = document.getElementById("upass")
 var oError = document.getElementById("error_box")
 var isError = true;
 if (oUname.value.length > 20 || oUname.value.length < 6) {
  oError.innerHTML = "用户名请输入6-20位字符";
  isError = false;
  return;
 }else if((oUname.value.charCodeAt(0)>=48) && (oUname.value.charCodeAt(0)<=57)){
  oError.innerHTML = "首字符必须为字母";
  return;
 }else for(var i=0;i57) && (oUname.value.charCodeAt(i)<97)||(oUname.value.charCodeAt(i)>122)){
   oError.innerHTML = "必须为字母跟数字组成";
   return;
  }
 }

 if (oUpass.value.length > 20 || oUpass.value.length < 6) {
  oError.innerHTML = "密码请输入6-20位字符"
  isError = false;
  return;
 }
 window.alert("登录成功")
}

Registration interface html code:

 
 
 
 




 

  
注册
 

 

  
账号:
   
  
  
密码:
   
  
  


  


  注册
 

 

  版权信息@
 

The running results are as follows:

Related recommendations:

Example sharing JavaScript login verification basic tutorial

Detailed explanation of Ajax to achieve beautiful and safe Login interface method

CSS and JS implementation of pop-up login centered interface tutorial

The above is the detailed content of Detailed example of js implementation of login and registration interface. For more information, please follow other related articles on the PHP Chinese website!