用JavaScript实现网页用户名，密码，邮箱，手机号等验证功能
1.用户名必须填写
2.密码长度8-16之间
3.邮箱地址，手机号必须符合正确格式
4.必须同意（勾选复选框）才能提交
5.当鼠标离开输入框点击后就会出现提示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body {
height: 1000px;
background: #ABC8DF;
background-size: 100% 100%;
}
.yemian {
font-size: 12px;
padding: 20px;
margin: 159px auto;
width: 450px;
height: 300px;
background: #B9D6ED;
line-height: 39px;
}
form {
text-align: center;
}
form>input,
form>button {
margin-top: 10px;
}
form>input {
margin: 0px auto;
height: 20px;
width: 191px;
}
span {
position: fixed;
color: #f00;
}
</style>
</head>
<body>
<div class="yemian">
<form action="register">
<input type="text" name="name" id="name" placeholder="用户名"><span id="msgName"></span><br>
<input type="password" name="pwd" id="pwd" placeholder="密码"><span id="msgPwd"></span><br>
<input type="email" name="email" id="email" placeholder="邮箱地址"><span id="msgEmail"></span><br>
<input type="tel" name="phone" id="phone" placeholder="手机号"><span id="msgPhone"></span><br>
<input type="text" name="address" id="address" placeholder="家庭地址"><span id="msgAddr"></span><br>
<input type="checkbox" name="allow" id="allow">同意协议<br>
<span id="msgAllow"></span><br>
<button type="button" onclick="checkData()">提交</button>
</form>
</div>
<script src='js/base.js'></script>
<script>
var errorMsg = [
'请输入用户名',
'密码必须在6~16之间',
'请输入正确的邮箱地址',
'请输入正确的手机号码',
'请输入家庭地址',
'必须同意协议才能提交'
];
//获取表单元素
var f = document.forms[0];
function checkData() {
var name = f.name.value;
var pwd = f.pwd.value;
var email = f.email.value;
var phone = f.phone.value;
var address = f.address.value;
var allow = f.allow.checked;
//假设允许提交
var flag = true;
if (name.length < 1) {
$('msgName').innerText = errorMsg[0];
flag = false;
} else {
$('msgName').innerText = ' ';
}
if (pwd.length < 6 || pwd.length > 16) {
$('msgPwd').innerText = errorMsg[1];
flag = false;
} else {
$('msgPwd').innerText = ' ';
}
if (!/^\w+@\w+\.\w+$/.test(email)) {
$('msgEmail').innerText = errorMsg[2];
flag = false;
} else {
$('msgEmail').innerText = ' ';
}
if (!/^1[35789]\d{9}$/.test(phone)) {
$('msgPhone').innerText = errorMsg[3];
flag = false;
} else {
$('msgPhone').innerText = '';
}
if (address.length < 1) {
$('msgAddr').innerText = errorMsg[4];
flag = false;
} else {
$('msgAddr').innerText = '';
}
if (!allow) {
$('msgAllow').innerText = errorMsg[5];
flag = false;
} else {
$('msgAllow').innerText = '';
}
if (flag) {
//约定优于配置
f.submit();
}
}
//当鼠标离开输入框点击后就提示
$('name').addEventListener('blur', function() {
if (this.value.length < 1) {
$('msgName').innerText = errorMsg[0];
} else {
$('msgName').innerText = '';
}
})
$('pwd').addEventListener('blur', function() {
if (this.value.length < 1) {
$('msgPwd').innerText = errorMsg[1];
} else {
$('msgPwd').innerText = ' ';
}
})
$('email').addEventListener('blur', function() {
if (this.value.length < 1) {
$('msgEmail').innerText = errorMsg[2];
} else {
$('msgEmail').innerText = ' ';
}
})
$('phone').addEventListener('blur', function() {
if (this.value.length < 1) {
$('msgPhone').innerText = errorMsg[3];
} else {
$('msgPhone').innerText = '';
}
})
$('address').addEventListener('blur', function() {
if (this.value.length < 1) {
$('msgAddr').innerText = errorMsg[4];
} else {
$('msgAddr').innerText = '';
}
})
</script>
</body>
</html>
