登录页面设计(实现功能判空限制账号密码长度限制只能输入数字和字母)

最新推荐文章于 2022-11-02 11:37:02 发布

置顶小浪儿

最新推荐文章于 2022-11-02 11:37:02 发布

阅读量7.5k

点赞数 4

文章标签：登录页面编程 HtmlCssJs

本文链接：https://blog.csdn.net/weixin_45740873/article/details/102514980

版权

此页面需要导入jquery-3.1.1.min.js包！
首次制作，有兴趣请提出意见，谢谢！

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>XXX信息站</title>
  <link rel="stylesheet" href="css/styles.css" />
  <script type="text/javascript" src="js/scripts.js" ></script>
  <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 </head>
 <body>
  <div class="page_all">
   <div class="page_center">
    <div class="page_center_1">
     <font class="page_center_1_fon">欢迎登录!</font>
     <form action="longin.html" method="get" name="tijiao">
      <input class="page_center_1_name" name="name" type="text" placeholder="请输入用户名">
      <br/>     
      <font class="page_center_1_tishi">*请输入字母或者数字(最长12位不包括空格)</font>
      <input class="page_center_1_pwd" name="pwd" type="password" placeholder="请输入密码">
      <br/>
      <font class="page_center_1_tishi">*请输入字母或者数字(最长12位不包括空格)</font>
      <br/>
      <div class="page_center_1_yanzheng">
       <input class="page_center_1_yanzheng_yanzhengma" name="yanzhengma" type="text" placeholder="请输入验证码">
       <img class="page_center_1_yanzheng_yanzhengtu" src="img/4.jpg"/>
      </div>
      <br/>      
      <input class="page_center_1_sub" type="button" value="Longin..." onclick="pankong()">
     </form>
    </div>
    <div class="page_center_2">
     出品方:小浪儿
    </div>
   </div>
  </div>
 </body>
</html>

styles.css

*{
  margin: 0px;
  padding: 0px;
  font-family: "楷体";
  text-align: center;
}
a{
  text-decoration: none;
  color: darkgrey;
  text-align: center;
}
ul{
  list-style: none;
}
ul li{
  text-align: center;
}
div{
  text-align: center;
}
input{
  outline:none;
}
.page_all{
  width: 100%;
  height: 790px;
  background: url(../img/6.jpg) no-repeat center;
  background-size: cover;
}
.page_all .page_center{
  margin: auto;
  width: 600px;
  height: 100%;
  background-color: rgba(255,255,255,0.4);
  position: relative;
}
.page_all .page_center .page_center_1{
  width: 420px;
  height: 270px;
  background-color: rgba(0,0,0,0.2);
  border-radius:50px ;
  position: absolute;
  left: 90px;
  top: 220px;
  background-size: cover;
}
.page_all .page_center .page_center_1 .page_center_1_fon{
  width: 100%;
  height: 70px;
  font-family: "微软雅黑";
  font-size: 26px;
  color: black;
  display: inline-block;
  font-weight: 600;
  line-height: 70px;
}
.page_all .page_center .page_center_1 .page_center_1_name{
  margin: auto;
  width: 180px;
  height: 27px;
  border-radius: 18px;
}
.page_all .page_center .page_center_1 .page_center_1_pwd{
  margin:  auto;
  width: 180px;
  height: 27px;
  border-radius: 18px;
}
.page_all .page_center .page_center_1 .page_center_1_sub{
  margin: auto;
  width: 80px;
  height: 27px;
  border-radius: 18px;
  color: #717238;
}
.page_all .page_center .page_center_1 .page_center_1_tishi{
 width: 100%;
 height: 18px;
 margin: auto;
 color: red;
 font-size: 13px;
 display: inline-block;
}
.page_all .page_center .page_center_1 .page_center_1_yanzheng{
  margin:  auto;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.page_all .page_center .page_center_1 .page_center_1_yanzheng .page_center_1_yanzheng_yanzhengma{
  margin:  0px -8px;
  width: 88px;
  height: 27px;
  border-radius: 18px; 
}
.page_all .page_center .page_center_1 .page_center_1_yanzheng .page_center_1_yanzheng_yanzhengtu{
  margin: 0px -1px;
  width: 89px;
  height: 27px;
  border: 2px solid #A9A9A9;
  border-radius: 18px; 
  vertical-align:middle;
}
.page_all .page_center .page_center_2{
  width: 100%;
  height: 30px;
  color: blue;
  font-size: 12px;
  text-align: right;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

scripts.js

function pankong(){
 var name = document.getElementsByName("name")[0].value;
 var pwd = document.getElementsByName("pwd")[0].value;
 var yanzhengma= document.getElementsByName("yanzhengma")[0].value;
 if (name.length == 0) {
  alert("用户名不可为空");
 }else if(pwd.length == 0){
  alert("密码不可为空");
 }else if(yanzhengma.length ==0){
  alert("验证码不可为空");
 }else{
  if(name.length >= 12){
   alert("超出可写入用户名");
  }else if(pwd.length >=12){
   alert("超出可写入密码");
  }else{
   var j =/^[0-9a-zA-Z]+$/;
   if(j.test(name)){
    document.tijiao.submit();
   }else if(j.test(pwd)){
    document.tijiao.submit();
   }else{
    alert("请输入字母或者数字");
   }
  }
 }
}

longin.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  嘟嘟嘟
 </body>
</html>

登录背景图片

在这里插入图片描述

页面效果展示

在这里插入图片描述

小浪儿

关注

4
点赞
踩
46

收藏

觉得还不错? 一键收藏
打赏
0
评论
登录页面设计(实现功能判空限制账号密码长度限制只能输入数字和字母)

index.htmlstyles.css
复制链接

扫一扫

登录页面设计(实现功能 判空 限制账号密码长度 限制只能输入数字和字母)

“相关推荐”对你有帮助么？

登录页面设计(实现功能判空限制账号密码长度限制只能输入数字和字母)