本文实例为大家分享了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;
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持NICE源码。
