表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font: 14px/28px "微软雅黑";
}
.contact *:focus {
outline: none;
}
.contact {
width: 700px;
height: auto;
background: #f6f6f6;
margin: 40px auto;
padding: 10px;
}
.contact ul {
width: 680px;
margin: 0 auto;
}
.contact ul li {
border-bottom: 1px solid #dfdfdf;
list-style: none;
padding: 12px;
}
.contact ul li label {
width: 120px;
display: inline-block;
/* float: left; */
}
.contact ul li input[type="text"],
.contact ul li input[type="password"] {
width: 220px;
height: 25px;
border: 1px solid #aaa;
padding: 3px 8px;
border-radius: 5px;
}
.contact ul li input:focus {
border-color: #c00;
}
.contact ul li input[type="text"] {
transition: padding 0.25s;
-o-transition: padding 0.25s;
-moz-transition: padding 0.25s;
-webkit-transition: padding 0.25s;
}
.contact ul li input[type="password"] {
transition: padding 0.25s;
-o-transition: padding 0.25s;
-moz-transition: padding 0.25s;
-webkit-transition: padding 0.25s;
}
.contact ul li input:focus {
padding-right: 70px;
}
.btn {
position: relative;
left: 300px;
}
.tips {
color: rgba(0, 0, 0, 0.5);
padding-left: 10px;
}
.tips_true,
.tips_false {
padding-left: 10px;
}
.tips_true {
color: green;
}
.tips_false {
color: red;
}
</style>
</head>
<body>
<div class="contact">
<form name="form1" method="post" action="https://www.baidu.com">
<ul>
<li>
<label>姓名:</label>
<input type="text" name="yourname" placeholder="请输入用户名" /><span class="tips"
id="divname">长度1~12个字符</span>
</li>
<li>
<label>密码:</label>
<input type="password" name="yourpass" placeholder="请输入你的密码" /><span class="tips"
id="divpassword1">密码必须6-12位的字母和数字组成</span>
</li>
<li>
<label>确认密码:</label>
<input type="password" name="yourpass2" placeholder="请再次输入你的密码" /><span class="tips"
id="divpassword2">两次密码需要相同</span>
</li>
<li>
<label>电子邮箱:</label>
<input type="text" name="youremail" placeholder="请输入你的邮箱" /><span class="tips"
id="divmail">请输入你的邮箱名</span>
</li>
</ul>
<b class="btn"><input type="submit" value="提交" />
<input type="reset" value="取消" /></b>
</form>
</div>
<script>
//获取input元素
var nameInput = document.querySelector('input[name=yourname]')
var passInput = document.querySelector('input[name=yourpass]')
var passInput2 = document.querySelector('input[name=yourpass2]')
var emailInput = document.querySelector('input[name=youremail]')
var divname = document.getElementById('divname') //获取名字的span
var divpassword1 = document.getElementById('divpassword1') //获取密码的span
var divpassword2 = document.getElementById('divpassword2') //获取确认密码的span
var divmail = document.getElementById('divmail')
//给nameInput添加失去焦点事件 验证用户名
nameInput.onblur = function () {
var username = nameInput.value
var regName = /^.{1,12}$/
if (regName.test(username)) {
// 验证正确
divname.classList.remove('tips_false')
divname.classList.add('tips_true')
divname.innerText = '用户名格式正确'
} else {
divname.classList.add('tips_false')
divname.classList.remove('tips_true')
divname.innerText = '用户名的长度1~12个字符'
}
}
//给密码passInput添加失去焦点事件,验证密码
passInput.onblur = function () {
var password1 = passInput.value
var regPassword1 = /^[a-zA-Z0-9]{6,12}$/
/* var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$){6,12}/)
if(reg.test(password1)){
divpassword1.classList.remove('tips_false')
divpassword1.classList.add('tips_true')
divpassword1.innerText = '密码正确'
}else {
divpassword1.classList.add('tips_false')
divpassword1.classList.remove('tips_true')
divpassword1.innerText = '密码为6~12个字母和数字'
}
} */
if (regPassword1.test(password1)) {
var regZM = /[a-zA-Z]/
var regSZ = /\d/
hasZM = false
hasSZ = false
for (var i = 0; i < password1.length; i++) {
if (regZM.test(password1[i])) {
hasZM = true
}
if (regSZ.test(password1[i])) {
hasSZ = true
}
} if (hasSZ && hasZM) {
divpassword1.classList.remove('tips_false')
divpassword1.classList.add('tips_true')
divpassword1.innerText = '密码正确'
} else {
divpassword1.classList.add('tips_false')
divpassword1.classList.remove('tips_true')
divpassword1.innerText = '密码字母和数字'
}
} else {
divpassword1.classList.add('tips_false')
divpassword1.classList.remove('tips_true')
divpassword1.innerText = '密码为6~12个字母和数字'
}
}
//给确认密码添加失去焦点事件
passInput2.onblur = function () {
var password1 = passInput.value
var password2 = passInput2.value
var regPassword2 = /^[a-zA-Z0-9]{6,12}$/
if (regPassword2.test(password2)) {
var regZM = /[a-zA-Z]/
var regSZ = /\d/
hasZM = false
hasSZ = false
for (var i = 0; i < password2.length; i++) {
if (regZM.test(password2[i])) {
hasZM = true
}
if (regSZ.test(password2[i])) {
hasSZ = true
}
}
if (hasSZ && hasZM) {
divpassword2.classList.remove('tips_false')
divpassword2.classList.add('tips_true')
divpassword2.innerText = '密码正确'
} else {
divpassword2.classList.add('tips_false')
divpassword2.classList.remove('tips_true')
divpassword2.innerText = '密码为6~12个字母和数字'
}
} else {
divpassword2.classList.add('tips_false')
divpassword2.classList.remove('tips_true')
divpassword2.innerText = '密码为6~12个字母和数字'
}
if (password2 === password1 && password2 !== '') {
divpassword2.innerHTML = '密码一致'
divpassword2.classList.remove('tips_false')
divpassword2.classList.add('tips_true')
} else {
divpassword2.innerHTML = '密码不一致'
divpassword2.classList.remove('tips_true')
divpassword2.classList.add('tips_false')
}
}
//给邮箱添加失去焦点事件
emailInput.onblur = function () {
var divmailValue = emailInput.value
var regEmail = /^\w+@[0-9a-zA-Z\.-]+\.([a-z]{2,6})$/
if (regEmail.test(divmailValue)) {
divmail.innerHTML = '邮箱正确'
divmail.classList.remove('tips_false')
divmail.classList.add('tips_true')
} else {
divmail.innerHTML = '邮箱格式不对'
divmail.classList.remove('tips_true')
divmail.classList.add('tips_false')
}
}
// 给表单验证的流程
var form = document.querySelector('form')//获取表单元素
form.onsubmit = function (e) {//给表单添加提交事件
var evt = event || e
evt.preventDefault()
//验证名字
var username = nameInput.value
var regName = /^.{1,12}$/
if (!regName.test(username)) {
divname.classList.add('tips_false')
divname.classList.remove('tips_true')
divname.innerText = '用户名的长度1~12个字符'
return
}
//验证密码
var password1 = passInput.value
var regPassword1 = /^[a-zA-Z0-9]{6,12}$/
if (!regPassword1.test(password1)) {
divpassword1.classList.add('tips_false')
divpassword1.classList.remove('tips_true')
divpassword1.innerText = '密码为6~12个字母和数字'
return
}
//验证是否是组合(字母和数字)
var regZM = /[a-zA-Z]/;
var regSZ = /\d/;
var hasZM = false;
var hasSZ = false;
for (var i = 0; i < password1.length; i++) {
if (regZM.test(password1[i])) {
hasZM = true;
}
if (regSZ.test(password1[i])) {
hasSZ = true;
}
}
if (!hasSZ || !hasZM) {
divpassword1.classList.add('tips_false')
divpassword1.classList.remove('tips_true')
divpassword1.innerText = '密码是字母和数字'
return
}
//验证确认密码
var password1 = passInput.value
var password2 = passInput2.value
var regPassword2 = /^[a-zA-Z0-9]{6,12}$/
if (!regPassword2.test(password2)) {
divpassword2.innerHTML = '密码不一致'
divpassword2.classList.remove('tips_true')
divpassword2.classList.add('tips_false')
return
}
var regZM = /[a-zA-Z]/
var regSZ = /\d/
hasZM = false
hasSZ = false
for (var i = 0; i < password2.length; i++) {
if (regZM.test(password2[i])) {
hasZM = true
}
if (regSZ.test(password2[i])) {
hasSZ = true
}
}
if (!hasSZ || !hasZM) {
divpassword2.innerHTML = '密码不一致'
divpassword2.classList.remove('tips_true')
divpassword2.classList.add('tips_false')
return
}
//验证邮箱
var divmailValue = emailInput.value
var regEmail = /^\w+@[0-9a-zA-Z\.-]+\.([a-z]{2,6})$/
if (!regEmail.test(divmailValue)) {
divmail.innerHTML = '邮箱格式不对'
divmail.classList.remove('tips_true')
divmail.classList.add('tips_false')
return
}
this.submit()
}
</script>
</body>
</html>