JS实现用户注册界面功能
更新时间：2021年09月22日 09:51:54 作者：yezi__626
这篇文章主要为大家详细介绍了JS实现用户注册界面功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现用户注册界面功能的具体代码，供大家参考，具体内容如下
1.css代码
*{
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;
}
2.html代码
<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>
3.js代码
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;
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
D3.js是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能，而不是给你一个专有的框架。最近在学习D3.js，这个例子是通过d3.js画一个简单的柱状图。下面来一起看看吧。2016-12-12
单体模式可以说是javascript中最基本也是最有用的模式之一，接下来通过本文给大家解析js设计模式之单体模式，非常不错，感兴趣的朋友一起看看吧2016-09-09
最近因为项目需要，有个需求是让实时显示当前时间，然后想想这不简单吗，自己就动手敲代码，但是发现一个问题，通过getMonth()得到月份，总是会比当前月份少1，深深觉得实践出真知啊…之前觉得Date对象挺简单的，有很多细节都没有注意。下面这篇文章就给大家详细介绍下。2016-10-10
这篇文章主要介绍了延时加载JavaScript代码提高速度的相关资料,需要的朋友可以参考下2015-12-12
JavaScript变量声明var,let.const及区别浅析
这篇文章主要介绍了JavaScript变量声明var,let.const及区别浅析,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了原生js实现的移动端可拖动进度条插件功能,结合实例形式详细分析了javascript拖动进度条插件的具体定义与使用技巧,需要的朋友可以参考下2019-08-08
这篇文章主要为大家详细介绍了微信小程序实现锚点功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了js实现当前输入框高亮显示的方法,涉及javascript针对输入框样式动态设置的技巧,非常美观大方,简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要为大家介绍了微信小程序网络数据请求的实现讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了详解javascript中的babel到底是什么，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论