用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>
