자바스크립트로 사용자 등록 인터페이스를 구현하는 방법(코드 포함)
- 不言원래의
- 2018-08-27 11:16:0013052검색
이 글의 내용은 JavaScript로 사용자 등록 인터페이스를 구현하는 방법(코드 포함)에 대한 내용입니다. 참고할 만한 내용이 있으니 도움이 필요한 분들에게 도움이 되길 바랍니다.
1.css code
*{
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 code
<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 code
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;
}
}
}관련 권장사항:
Ajax와 폼을 사용하여 사용자 등록에 필요한 기능 구현
위 내용은 자바스크립트로 사용자 등록 인터페이스를 구현하는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js의 알고리즘 문제에서 정규식 적용 요약다음 기사：js의 알고리즘 문제에서 정규식 적용 요약