js编写常用的表单验证，js表单验证完整代码

来源：互联网发布：淘宝如何变更主营类目编辑：程序博客网时间：2024/05/16 10:13
<!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：
金额：
输入汉字：
输入密码：
弱中强
再一次输入密码：
输入验证码：获取验证码
0 0