<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>前端表单验证</title>
<style type="text/css">
span {
display: inline-block;
height: 15px;
width: 70px;
font-size: 12px;
margin-right: 2px;
text-align: center;
}
.ruo {
background-color: #D9D8D8;
}
.zhong {
background-color: #D9D8D8;
}
.qiang {
background-color: #D9D8D8;
}
.promptBox {
width: 300px;
height: 50px;
border: 1px #E6B500 solid;
opacity: 0;
}
.code {
background-color: #D1D3D6;
height: 30px;
line-height: 30px;
width: 80px;
text-align: center;
}
</style>
</head>
<body>
<div class="promptBox" id="promptBox"></div>
<p>日期：<input type="text" name="day" id="day" size="30" placeholder="请输入日期，格式：yyyy-mm-dd"></p>
<p>电话号码：<input type="text" name="phone" id="phone" size="20" / placeholder="请输入有效的手机号码"></p>
<p>E-mail：<input type="text" name="mail" id="mail" size="20" / placeholder="请输入正确的邮箱地址"></p>
<p>金额：<input type="text" name="money" id="money" size="20" / placeholder="请输入正确的金额数字"></p>
<p>输入汉字：<input type="text" name="character" id="character" size="20" / placeholder="请输入汉字"></p>
<div>
<p>输入密码：<input type="text" name="password" id="password" placeholder="请输入6~20位密码" /></p>
<p><span class="ruo" id="ruo">弱</span><span class="zhong" id="zhong">中</span><span class="qiang" id="qiang">强</span></p>
<p>再一次输入密码：<input type="text" name="repassword" id="repassword" placeholder="再一次输入密码" /></p>
</div>
<p>输入验证码：
<input type="text" name="identifyingCode" class="identifyingCode" id="identifyingCode" />
<span class="code" id="code">获取验证码</span>
</p>
<p><input type="submit" value="Submit" id="submitBtn"></p>
<script type="text/javascript">
window.onload = function() {
var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function() {
var day = document.getElementById("day");
var dayValue = day.value;
var phone = document.getElementById("phone");
var phoneValue = phone.value;
var mail = document.getElementById("mail");
var mailValue = mail.value;
var money = document.getElementById("money");
var moneyValue = money.value;
var character = document.getElementById("character");
var characterValue = character.value;
_valiDate(dayValue); //验证日期
_validatePhone(phoneValue) //验证手机号码
_validateEmail(mailValue) //邮箱验证
_validateMoney(moneyValue) //金额验证
_ChineseCharacter(characterValue) //验证汉字
}
var password = document.getElementById("password");
password.oninput = function() {
var passwordValue = password.value;
_validatePassword(passwordValue);
}
var repassword = document.getElementById("repassword"); //第二次输入的密码
repassword.onblur = function() {
_validateRepwd(repassword.value);
}
function _valiDate(dateValue) { //日期验证
var reg = /((^((1[8-9]\d{2})|([2-9]\d{3}))(-)(10|12|0?[13578])(-)(3[01]|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(11|0?[469])(-)(30|[12][0-9]|0?[1-9])$)|(^((1[8-9]\d{2})|([2-9]\d{3}))(-)(0?2)(-)(2[0-8]|1[0-9]|0?[1-9])$)|(^([2468][048]00)(-)(0?2)(-)(29)$)|(^([3579][26]00)(-)(0?2)(-)(29)$)|(^([1][89][0][48])(-)(0?2)(-)(29)$)|(^([2-9][0-9][0][48])(-)(0?2)(-)(29)$)|(^([1][89][2468][048])(-)(0?2)(-)(29)$)|(^([2-9][0-9][2468][048])(-)(0?2)(-)(29)$)|(^([1][89][13579][26])(-)(0?2)(-)(29)$)|(^([2-9][0-9][13579][26])(-)(0?2)(-)(29)$))/;
if(dateValue == '' || dateValue == null) {
_promptBoxFn('日期不能为空');
return false;
} else if(reg.test(dateValue) == false) {
_promptBoxFn('请输入正确的日期');
return false;
} else {
_promptBoxFn('');
return true;
}
}
function _validatePhone(phoneValue) { //手机号码验证
var reg = /^[1][3,5,7,8][0-9]{9}$/;
if(phoneValue == '' || phoneValue == null) {
_promptBoxFn('手机号码不能为空');
return false;
} else if(reg.test(phoneValue) == false) {
_promptBoxFn('请输入正确的手机号');
return false;
} else {
_promptBoxFn('');
return true;
}
}
function _validateEmail(mailValue) { //邮箱验证
var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(mailValue == '' || mailValue == null) {
_promptBoxFn('邮箱不能为空');
return false;
} else if(reg.test(mailValue) == false) {
_promptBoxFn('请输入正确的E-mail地址');
return false;
} else {
_promptBoxFn('');
return true;
}
}
function _validateMoney(moneyValue) { //金额验证
var reg = /^[0-9]*\.?[0-9]{0,2}$/;
if(moneyValue == '' || moneyValue == null) {
_promptBoxFn('金额不能为空');
return false;
} else if(reg.test(moneyValue) == false) {
_promptBoxFn('请输入正确的数字');
return false;
} else {
_promptBoxFn('');
return true;
}
}
/*验证是否是汉字*/
function _ChineseCharacter(characterValue) {
var reg = /^[\u4e00-\u9fa5]{0,}$/;
if(characterValue == '' || characterValue == null) {
_promptBoxFn('内容不能为空');
return false;
} else if(reg.test(characterValue) == false) {
_promptBoxFn('请输入正确的汉字');
return false;
} else {
_promptBoxFn('');
return true;
}
}
/*密码验证*/
function _validatePassword(passwordValue) {
//强：字母+数字+特殊字符
var regQ = /(?=.*[a-z])(?=.*\d)(?=.*[#@!~%^&*])[a-z\d#@!~%^&*]{6,20}/i;
//中：字母+数字，字母+特殊字符，数字+特殊字符
var regZ = /((?=.*[a-z])(?=.*\d)|(?=[a-z])(?=.*[#@!~%^&*])|(?=.*\d)(?=.*[#@!~%^&*]))[a-z\d#@!~%^&*]{8,16}/i;
//弱：纯数字，纯字母，纯特殊字符
var regR = /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/;
if(passwordValue == '' || passwordValue == null) {
_promptBoxFn('内容不能为空');
return false;
} else if(passwordValue.length <6) {
_promptBoxFn('密码长度为6~20位之间');
} else if(6 <= passwordValue.length <= 20) {
var ruo = document.getElementById("ruo");
var zhong = document.getElementById("zhong");
var qiang = document.getElementById("qiang");
_promptBoxFn('');
console.log(passwordValue.length);
if(regQ.test(passwordValue)) { //密码安全度为强
console.log('强');
qiang.style.backgroundColor = '#009689';
zhong.style.backgroundColor = '#D9D8D8';
ruo.style.backgroundColor = '#D9D8D8';
} else if(regZ.test(passwordValue)) { //密码安全度为中
console.log('中');
zhong.style.backgroundColor = '#FFA500';
qiang.style.backgroundColor = '#D9D8D8';
ruo.style.backgroundColor = '#D9D8D8';
}else if(regR.test(passwordValue)) { //密码安全度为弱
console.log('弱');
ruo.style.backgroundColor = '#E42112';
qiang.style.backgroundColor = '#D9D8D8';
zhong.style.backgroundColor = '#D9D8D8';
}
} else if(passwordValue.length <= 6 || 20 <= passwordValue.length) {
_promptBoxFn('请输入6~20位密码');
return false;
}
return true;
}
/*验证两次密码的一致性*/
function _validateRepwd(repwdValue) {
var password = document.getElementById("password"); //第一次输入的密码
if(password.value != repwdValue) {
_promptBoxFn('两次密码不一致');
return false;
}
_promptBoxFn('');
return true;
}
var code = document.getElementById("code");
code.onclick = function() {
code.innerHTML = _generateCode();
}
var identifyingCode = document.getElementById("identifyingCode");
identifyingCode.onblur = function() {
var identifyingCodeValue = identifyingCode.value;
console.log("code.innerHTML = " + code.innerHTML);
console.log("identifyingCodeValue = " + identifyingCodeValue);
if (identifyingCodeValue != code.innerHTML) {
_promptBoxFn('验证码有误');
return false;
}
_promptBoxFn('');
return true;
}
/*验证码生成函数*/
function _generateCode() {
var codeArr = ['1','2','3','4','5','6','7','8','9','0','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
var index01 = parseInt(Math.random() * 36);
var index02 = parseInt(Math.random() * 36);
var index03 = parseInt(Math.random() * 36);
var index04 = parseInt(Math.random() * 36);
console.log(index01,index02,index03,index04);
var codeStr = codeArr[index01] + codeArr[index02] + codeArr[index03] + codeArr[index04];
return codeStr;
}
/*提示框内容*/
function _promptBoxFn(markedWords) {
var promptBox = document.getElementById("promptBox");
promptBox.innerHTML = markedWords;
if(promptBox.innerHTML == '') {
promptBox.style.opacity = '0'; //提示框有内容的时候隐藏提示框
} else if(promptBox.innerHTML) {
promptBox.style.opacity = '1'; //提示框内容为空的时候显示提示框
}
}
}
</script>
</body>
</html>日期：
电话号码：
E-mail：
金额：
输入汉字：
输入密码：
弱中强
再一次输入密码：
输入验证码：获取验证码
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
