简单注册表

<!DOCTYPE html>
<html lang="en">
<head>

<form >

<div id="box" style="width:100%;height:30px"></div>

<div class="box1">
<span >用户名:</span>
<input type="text" placeholder=""/>
<i>6-16位数字、字母、下划线、组成</i>
</div>

<div class="box1">
<span >登入密码:</span>
<input type="text" placeholder=""/>
<i>6-16位数字英文字符下划线连字符</i>
</div>

<div class="box1">
<span >验证密码:</span>
<input type="text" placeholder=""/>
<i>需要与密码一致</i>
</div>

<div class="box1">
<span >密码强度:</span>
<div style="display:inline-block;width:30%;height:20px;" id="boxcolor">
<span></span> <span></span> <span></span>
</div>
</div>

<div class="box1">
<span >手机号:</span>
<input type="text" placeholder=""/>
<i>11位数字，以13|18|15|17开头</i>
</div>

<div class="box1">
<span >邮箱:</span>
<input type="text" placeholder=""/>
<i>[email protected]</i>
</div>

<div style="border-radius:5px;border:1px solid black;width:60px;height:20px;display:inline-block;vertical-align:middle;text-align:center" class="put">
</div>

<i>需要与验证码一致</i>
</div>

</form>

</body>
</html>
<script type="text/javascript">

// 拖拽区域运动
var box=document.getElementById("box");
var boxbig=document.querySelector("form");

// 按下
box.onmousedown=function(){
// 移动
document.onmousemove=function(e){
var e=e||event;
var l=e.clientX-box.offsetWidth/2;
var t=e.clientY-box.offsetHeight/2;

// 判断
l=l>innerWidth-boxbig.offsetWidth?innerWidth-boxbig.offsetWidth:(l<0?0:l);
t=t>innerHeight-boxbig.offsetHeight?innerHeight-boxbig.offsetHeight:(t<0?0:t);

// 赋值
boxbig.style.left=l+"px";
boxbig.style.top=t+"px";
}
// 抬起
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}

// 点击跳转，出现透明模板
var btn=document.querySelector("button");

btn.onclick=function(){

// 注册页面出现
boxbig.style.display="block";
// 按钮消失
btn.style.display="none";
// 背景颜色
document.body.style.background="rgba(0,0,0,.6)"
}

// 点击取消，出现原模板
var btn1=document.getElementById("btn1")

btn1.ondblclick=function(){
// 注册页面出现消失
boxbig.style.display="none";
// 颜色去掉
document.body.style.background="";
}

// 获取所有表单框
var oinput=document.querySelectorAll("input");
// 获取所有提示内容框
var txt=document.querySelectorAll("i");

// 遍历所有表单框
for(var i=0;i<oinput.length;i++){

// 保留i值
oinput[i].index=i;

// 获取当前提示内容值，注意let，var失效
let content=txt[i].innerHTML;

console.log(content)

// 当前按钮点击
oinput[i].onfocus=function(){

// 判断提示内容框内容是否为"请重新输入"
if(txt[this.index].innerHTML=="请重新输入"){

// 按钮框为空
this.value="";

// 提示内容框的值为先前获取的
txt[this.index].innerHTML=content;
}
}
}

// 判断用户名
oinput[0].onblur=function(){
if(!/^\w{6,16}$/.test(oinput[0].value)){

txt[0].innerHTML="请重新输入"
}
}

// 获取3个颜色框
var boxcolor=document.querySelectorAll("#boxcolor span");

var a=/^[a-zA-Z0-9_-]{6,16}$/;
var b=/^\d{5,15}$/;
var c=/^[a-zA-Z0-9]{5,15}$/;
var d=/^\w\w{4,14}$/;

// 判断密码和判断密码强度
oinput[1].onblur=function(){

if(!/^\w{6,16}$/.test(oinput[1].value)){

txt[1].innerHTML="请重新输入"

}else{

if(b.test(oinput[1].value)){

boxcolor[0].style.background="red";
boxcolor[1].style.background="";
boxcolor[2].style.background="";
}else if(c.test(oinput[1].value)){

boxcolor[0].style.background="";
boxcolor[1].style.background="orange";
boxcolor[2].style.background="";
}else if(d.test(oinput[1].value)){

boxcolor[0].style.background="";
boxcolor[1].style.background="";
boxcolor[2].style.background="green";
}

}
}

// 验证密码
oinput[2].onblur=function(){
if(!(oinput[2].value==oinput[1].value)){
txt[2].innerHTML="请重新输入"
}
}

// 验证手机号
oinput[3].onblur=function(){
if(!/^1[3578]\d{9}$/.test(oinput[3].value)){
txt[3].innerHTML="请重新输入"
}
}

// 验证邮箱
oinput[4].onblur=function(){
if(!/^\w+@[a-zA-Z0-9]+(\.(com|cn)){3}$/.test(oinput[4].value)){
txt[4].innerHTML="请重新输入"
}
}

// 随机生成6位数字字母验证码
function fn(){
var str="";
for(var i=0;i<6;i++){
var n=parseInt(48+Math.random()*(122-48+1));
while(n>=58&&n<=64||n>=91&&n<=96){
n=parseInt(48+Math.random()*(122-48+1));
}
var char=String.fromCharCode(n);
str+=char;
}
return str;
}

// 获取得到验证码的文本框
var put=document.querySelector(".put");

// 先调用一次
put.innerHTML=fn();

// 点击再次调用
put.onclick=function(){
put.innerHTML=fn();
}

// 判断验证码
oinput[5].onblur=function(){
if(!(oinput[5].value==put.innerHTML)){
txt[5].innerHTML="请重新输入"
put.innerHTML=fn()
}
}

</script>

猜你喜欢