菜鸟学web---类似淘宝的登陆界面

功能介绍：该页面只是在浏览器端判断是否输入的字符是否符合要求，没有经过数据库。当点击文本框时，会有提示，输入完成后也会看是否正确，后面也会跟着一些提示。界面如下：

输入用户名或者密码时：

其中所用到的知识：简单的html 、css 和javascript，
在javascript中使用到了Javascript的正则表达式。（以后文章会写一些简单的正则表达式）

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页面</title><link href="mycss.css" type="text/css" rel="stylesheet"><script type="text/javascript" src="new.js"></script>
</head>
<body><form action="test.html"><div><label><span>会员名</span> <input type="text" class="text"> </label><p class="msg" ><i class="ati" ></i>5-26个字符，一个汉字为两个字符，推荐使用中文名称</p></div><div> <label><span></span> <b id="count">0个字符</b> </label> </div><div><label> <span>登录密码</span> <input type="password" class="text" ></label><p class="msg" ><i class="err" ></i>5-26个字符，一个汉字为两个字符，推荐使用中文名称</p></div><div><label><span></span> <em class="active">弱</em><em>中</em><em>强</em> </label></div><div><label> <span>确认密码</span> <input type="password" class="text" disabled="disabled"></label><p class="msg" ><i class="err" ></i>请输入确认密码</p></div><div><label><span></span> </label><input class="submitBtn" value="提 交" type="submit"><input class="submitBtn" value="重置" type="reset"> </div></form>
</body>
</html>

css代码：

1. * {background-color:lightgrey;margin: 0;padding: 0;font: 18px "仿宋","Arial","sans-serif","Tahoma";}input,img,label {vertical-align: middle;
}/*main*/
form {width: 740px;height: 200px;margin: 100px 400px;padding:100px 100px 100px 100px;
}form div {overflow: hidden;clear: both;
}form div label {display: block;float: left;clear: both;
}form div label .text {width: 152px;height: 26px;padding: 0 2px;border: 1px solid #918391;
}form div label b {font-weight:normal;font-size: 12px;color: #827282;visibility: hidden;
}form div em {display: inline-block;font-size: 12px;text-align: center;color: #fff;vertical-align: middle;width: 53px;height: 15px;line-height: 15px;background-color: #FFD009;margin:5px 0px 5px 0px;}form div .active {background-color: #F60;
}div label span {display: inline-block;width: 85px;text-align: right;color: #000000;/*margin:0px 0px 0px 12px;*//*background-color: #ff1015;*/
}.submitBtn {display: inline;width: 75px;height: 25px;color: #151515;visibility: visible;margin: 20px 0px 0px 0px;background-color: #FF6600;
}.changeImg {width: 22px;height: 22px;display: inline-block;vertical-align: middle;/*  background: url() no-repeat   ;*/
}
.msg {padding-top:8px;font-size:10px;font-weight: bold;line-height: 12px ;color: #716371;float:left;margin-left: 5px;display:none;
}.msg i {display: inline-block;vertical-align: middle;width: 25px;height: 20px;/*background: url() no-repeat 0 -128px;*/
}.msg .ati{background-position: 0 -71px;}
.msg .err{background-position: 0 -39px;}
.msg .ok{background-position: 0 -99px;}

javascript代码：

/*** Created by Administrator on 2016/10/18 0018.*/function  getLength(str){var str1= str.replace(/[^x00-xff]/g,"xx");return str1.length;
}
window.onload=function(){var ainput = document.getElementsByTagName("input");var oname=ainput[0];var pwd = ainput[1];var pwd2=ainput[2];var aP = document.getElementsByTagName("p");//alert(aP[0].innerHTML);var name_msg = aP[0];var pwd_msg = aP[1];var pwd2_msg=aP[2];var count = document.getElementById("count");var Eam = document.getElementsByTagName("em");var re =/[^\w\u4e00-\u9fa5]/g;var name_length=0;oname.onfocus=function(){name_msg.style.display="block";//alert(name_msg.value);name_msg.innerHTML='<i class="ati" ></i>5-26个字符，一个汉字为两个字符，推荐使用中文名称';}oname.onkeyup=function(){count.style.visibility="visible";name_length= getLength(this.value);count.innerHTML=name_length+"个字符";if(name_length==0){count.style.visibility="hidden";}}oname.onblur=function(){//    判断是否okif(name_length>26||name_length<5){name_msg.innerHTML='<i class="err" ></i>字符长度不正确';}else{//    输出ok//name_msg.innerHTML='OK';}}pwd.onfocus=function(){pwd_msg.style.display="block";//alert(name_msg.value);pwd_msg.innerHTML='<i class="ati" ></i>6-16个字母或数字';}pwd.onkeyup=function(){if(this.value.length>5){Eam[1].className="active";pwd2.removeAttribute("disabled");pwd2_msg.style.display="block";}else{Eam[1].className="";pwd2.disabled="disabled";pwd2_msg.style.display="none";}}pwd.onblur=function(){if(this.value.length<6||this.value.length>16){pwd2_msg.style.display="block";pwd2_msg.innerHTML='格式输入不正确';}}}

其实javascript代码还有一些功能没有完善，只是自己学习中的一点点进步，肯定有好多不好的地方，大家提出来一起进步，一起解决。
（这是我第一个博客，排版也不好，也希望大家给出排版的技巧。）

菜鸟学web---类似淘宝的登陆界面相关推荐

使用cdp4j进行淘宝自动化登陆
原文地址 http://118.25.172.253/2019/01/05/使用cdp4j进行淘宝自动化登陆/#more 先给出成品图 cdp4j简单描述 cdp4j is a web-automat ...
python淘宝爬虫登陆功能和下单功能_Python 爬虫实战5 模拟登录淘宝并获取所有订单...
经过多次尝试,模拟登录淘宝终于成功了,实在是不容易,淘宝的登录加密和验证太复杂了,煞费苦心,在此写出来和大家一起分享,希望大家支持. 本篇内容 python模拟登录淘宝网页获取登录用户的所有订单详情 ...
python淘宝爬虫登陆功能和下单功能_Python爬虫实战五之模拟登录淘宝并获取所有订单 | 静觅...
经过多次尝试,模拟登录淘宝终于成功了,实在是不容易,淘宝的登录加密和验证太复杂了,煞费苦心,在此写出来和大家一起分享,希望大家支持. 温馨提示更新时间,2016-02-01,现在淘宝换成了滑块验证了 ...
写一个类似淘宝的ios app需要用到哪些技术？
写一个类似淘宝的ios app需要用到哪些技术? 让我想起了有人私信我,说不缺钱,做个类似知乎的东西,包括加运营,需要多少钱. 扯淡结束,正好最近看了一点这方面的东西,也许对题主来说有点帮助. 手机淘 ...
VUE类似淘宝选择商品多规格(库存判断)
1.组件效果展示也可访问链接查看网页效果... 后面又用uni-app写过一次,比这次稍微清晰一些 uni-app类似淘宝选择商品多规格(库存判断) 瞎封装组件系列: VUE简单提示框 VUE树形图 ...
类似淘宝不规则九宫格
今天看到一个demo 发现上面有个类似淘宝的不规则的九宫格布局,收藏下,写下来,与君分享. <LinearLayoutandroid:layout_width="match_paren ...
App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，方格布局横向滑动翻页带滚动条
TransformersLayout 项目地址:zaaach/TransformersLayout 简介: :fire: App 金刚区导航菜单,类似淘宝.QQ 音乐等 APP 导航,方格布局横向滑 ...
php 模拟登录淘宝taobao阿里妈妈|模拟登录淘宝联盟|curl模拟登录淘宝|模拟登陆淘宝采集数据
php 模拟登录淘宝taobao阿里妈妈|模拟登录淘宝联盟|curl模拟登录淘宝|模拟登陆淘宝采集数据在很多项目中我们可能要采集淘宝会员中心的一些数据.但是程序采集的时候会员中心必须是登录的,这里我 ...
vue 实现类似淘宝的商品详情页的商品展示
vue 实现类似淘宝的商品详情页的商品展示利用vue和swiper实现缩略图控制 / Swiper互相控制具体需求描述: 图片大图自动轮播展示,下面的缩略图跟着变化,点击小图切换到对应的大图,大图 ...

菜鸟学web---类似淘宝的登陆界面

菜鸟学web---类似淘宝的登陆界面相关推荐

最新文章

热门文章