<!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> |
转载于:https://www.cnblogs.com/qilin0/p/11512339.html