js实现登录与注册界面

完成登录与注册页面的HTML+CSS+JS，其中的输入项检查包括：

成都创新互联是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，小程序开发，十余年建站对成都VR全景等多个领域，拥有丰富的网站运维经验。

用户名6-12位

首字母不能是数字

只能包含字母和数字

密码6-12位

注册页两次密码是否一致

html代码：




 
 欢迎你，请先登陆！
 
 
 




 登陆

css代码：

*{
 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 h3{
 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代码：

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("登录成功")
}

注册界面html代码：




 
 欢迎你，请先登陆！
 
 



 
  注册
 
 
  账号:
   
  
  密码:
   
  
  

  


  
 
 
  版权信息@

运行结果如下：

js实现登录与注册界面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

当前文章：js实现登录与注册界面
标题路径：http://dzwzjz.com/article/jiieio.html

大橙子网站建设，新征程启航

js实现登录与注册界面

登陆

注册

其他资讯