| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<title>表单验证</title> |
| |
<style> |
| |
.item{ |
| |
margin-top: 15px; |
| |
} |
| |
.letterSpace{ |
| |
letter-spacing: 2em; |
| |
} |
| |
input{ |
| |
width: 200px; |
| |
height: 26px; |
| |
transition: .5s |
| |
} |
| |
.err{ |
| |
font-size: 12px; |
| |
color: red; |
| |
} |
| |
.register{ |
| |
border-radius: 10px; |
| |
cursor: pointer; |
| |
} |
| |
</style> |
| |
</head> |
| |
<body> |
| |
<h3>表单提交验证</h3> |
| |
<form action="#" method="post"> |
| |
<div class="item"> |
| |
<span class="letterSpace">姓</span>名： |
| |
<input type="text" name="userName" id="userName"> |
| |
<span class="err"></span> |
| |
</div> |
| |
<div class="item"> |
| |
<span class="letterSpace">密</span>码： |
| |
<input type="password" name="password" id="password"> |
| |
<span class="err"></span> |
| |
</div> |
| |
<div class="item"> |
| |
确认密码： |
| |
<input type="password" name="confrimPWD" id="confrimPWD"> |
| |
<span class="err"></span> |
| |
</div> |
| |
<div class="item"> |
| |
<span class="letterSpace">生</span>日： |
| |
<input type="date" name="birthday" id="birthday"> |
| |
<span class="err"></span> |
| |
</div> |
| |
<div class="item"> |
| |
电话号码： |
| |
<input type="tel" name="tel" id="tel"> |
| |
<span class="err"></span> |
| |
</div> |
| |
<div class="item"> |
| |
家庭住址： |
| |
<input type="text" name="address" id="address"> |
| |
<span class="err"></span> |
| |
</div> |
| |
<div class="item"> |
| |
<button class="register">用户注册</button> |
| |
</div> |
| |
</form> |
| |
<script> |
| |
// 获取DOM元素 |
| |
let form = document.forms[0]; |
| |
let err = document.getElementsByClassName("err"); |
| |
let input = document.getElementsByTagName("input"); |
| |
/* ------------------------------------------------------------------*/ |
| |
// 用户名焦点事件 |
| |
let userNameholder = function(){ |
| |
this.setAttribute("placeholder","以字母开头，长度为4-11位"); |
| |
this.style.width = 250 + "px"; |
| |
} |
| |
// 用户名验证 |
| |
let userNameCheck = function(){ |
| |
this.setAttribute("placeholder",""); |
| |
let reg = /^[A-Za-z]\w{3,10}$/; |
| |
if(reg.test(userName.value) || userName.value === "") |
| |
{ |
| |
err[0].innerHTML = ""; |
| |
} |
| |
else{ |
| |
err[0].innerHTML = "用户名必须由字母开头，长度为4-11位"; |
| |
} |
| |
// 如果输入框里面没有内容，要将长度还原 |
| |
if(userName.value === "") |
| |
{ |
| |
this.style.width = 200 + "px"; |
| |
} |
| |
} |
| |
userName.addEventListener("focus",userNameholder,false); |
| |
userName.addEventListener("blur",userNameCheck,false); |
| |
/* ------------------------------------------------------------------*/ |
| |
// 密码焦点事件 |
| |
let passwordholder = function(){ |
| |
this.setAttribute("placeholder","密码长度为6-30位"); |
| |
this.style.width = 250 + "px"; |
| |
} |
| |
// 验证密码事件 |
| |
let passwordCheck = function(){ |
| |
this.setAttribute("placeholder",""); |
| |
let reg = /^\w{6,30}$/; |
| |
if(reg.test(password.value) || password.value==="") |
| |
{ |
| |
err[1].innerHTML = ""; |
| |
} |
| |
else{ |
| |
err[1].innerHTML = "密码长度最少6位，最多30位组成"; |
| |
} |
| |
// 如果输入框里面没有内容，要将长度还原 |
| |
if(password.value === "") |
| |
{ |
| |
this.style.width = 200 + "px"; |
| |
} |
| |
} |
| |
password.addEventListener("focus",passwordholder,false); |
| |
password.addEventListener("blur",passwordCheck,false); |
| |
/* ------------------------------------------------------------------*/ |
| |
// 二次密码焦点事件 |
| |
let confrimPWDholder = function(){ |
| |
this.setAttribute("placeholder","请再次输入您的密码"); |
| |
this.style.width = 250 + "px"; |
| |
} |
| |
// 二次密码验证事件 |
| |
let confrimPWDCheck = function(){ |
| |
this.setAttribute("placeholder",""); |
| |
if(confrimPWD.value === "" || confrimPWD.value === password.value) |
| |
{ |
| |
err[2].innerHTML = ""; |
| |
} |
| |
else{ |
| |
err[2].innerHTML = "两次输入的密码不一致"; |
| |
} |
| |
// 如果输入框里面没有内容，要将长度还原 |
| |
if(confrimPWD.value === "") |
| |
{ |
| |
this.style.width = 200 + "px"; |
| |
} |
| |
} |
| |
confrimPWD.addEventListener("focus",confrimPWDholder,false); |
| |
confrimPWD.addEventListener("blur",confrimPWDCheck,false); |
| |
/* ------------------------------------------------------------------*/ |
| |
// 生日 |
| |
let birthlonger = function(){ |
| |
this.style.width = 250 + "px"; |
| |
} |
| |
let birthshort = function(){ |
| |
if(birthday.value === "") |
| |
{ |
| |
this.style.width = 200 + "px"; |
| |
} |
| |
} |
| |
birthday.addEventListener("focus",birthlonger,false); |
| |
birthday.addEventListener("blur",birthshort,false); |
| |
/* ------------------------------------------------------------------*/ |
| |
// 电话号码焦点事件 |
| |
let telholder = function(){ |
| |
this.setAttribute("placeholder","请填写您的手机号码"); |
| |
this.style.width = 250 + "px"; |
| |
} |
| |
let telCheck = function(){ |
| |
let content = parseInt(tel.value); |
| |
this.setAttribute("placeholder",""); |
| |
let reg = /^1[3578]\d{9}$/; |
| |
if(reg.test(content) || tel.value === "") |
| |
{ |
| |
err[4].innerHTML = ""; |
| |
} |
| |
else{ |
| |
err[4].innerHTML = "电话号码格式不正确"; |
| |
} |
| |
// 如果输入框里面没有内容，要将长度还原 |
| |
if(tel.value === "") |
| |
{ |
| |
this.style.width = 200 + "px"; |
| |
} |
| |
} |
| |
tel.addEventListener("focus",telholder,false); |
| |
tel.addEventListener("blur",telCheck,false); |
| |
/* ------------------------------------------------------------------*/ |
| |
// 家庭地址焦点事件 |
| |
let addressholder = function(){ |
| |
this.setAttribute("placeholder","请填写您的家庭地址"); |
| |
this.style.width = 250 + "px"; |
| |
} |
| |
let addressCheck = function(){ |
| |
this.setAttribute("placeholder",""); |
| |
if(address.value === "") |
| |
{ |
| |
this.style.width = 200 + "px"; |
| |
} |
| |
} |
| |
address.addEventListener("focus",addressholder,false); |
| |
address.addEventListener("blur",addressCheck,false); |
| |
/* ------------------------------------------------------------------*/ |
| |
// 提交验证 |
| |
|
| |
form.onsubmit = function(){ |
| |
if(password.value !== confrimPWD.value) |
| |
{ |
| |
err[2].innerHTML = "两次输入的密码不一致"; |
| |
} |
| |
for(let i=0;i<input.length;i++) |
| |
{ |
| |
if(input[i].value === "") |
| |
{ |
| |
alert("有内容还没有填写"); |
| |
return false; |
| |
} |
| |
} |
| |
for(let i=0;i<err.length;i++) |
| |
{ |
| |
if(err[i].innerHTML !== "") |
| |
{ |
| |
alert("请正确填写内容"); |
| |
return false; |
| |
} |
| |
} |
| |
alert("表单提交成功"); |
| |
return true; |
| |
} |
| |
</script> |
| |
</body> |
| |
</html> |
