表单正则验证Demo
先目睹下页面吧ヾ(๑╹◡╹)ﾉ"
主要技术点：
输入框为空时提示该项为空；
输入框错误时提示该项错误；
只有各项都符合要求，才能提交，否则提示；
重置后各项都为空，相应的提示也消失。
HTML代码：
<body>
<div id="div-id">
<h1>个人信息登记表h1>
<form action="success.html" name="myform" onsubmit="return doSubmit()" onreset="doReset()" method="POST">
<table>
<tr>
<td>登录账号：td>
<td><input type="text" class="text-class" name="uname" onblur="checkUname()">td>
<td>td>
tr>
<tr>
<td>登录密码：td>
<td><input type="password" class="text-class" name="pass" onblur="checkPass()">td>
<td>td>
tr>
<tr>
<td>重复密码：td>
<td><input type="password" class="text-class" name="againpass" onblur="checkAgainpass()">td>
<td>td>
tr>
<tr>
<td>性 别：td>
<td>
<input type="radio" name="sex" value="0" onclick="checkSex()"> 男
<input type="radio" name="sex" value="1" onclick="checkSex()"> 女
td>
<td>td>
tr>
<tr>
<td>年 龄：td>
<td><input type="text" class="text-class" name="age" onblur="checkAge()">td>
<td>td>
tr>
<tr>
<td>手机号码：td>
<td><input type="text" class="text-class" name="tel" onblur="checkTel()">td>
<td>td>
tr>
<tr>
<td>邮 箱：td>
<td><input type="text" class="text-class" name="email" onblur="checkEmail()">td>
<td>td>
tr>
<tr>
<td>学 历：td>
<td>
<select name="education" id="select-id" onclick="checkEdu()">
<option value="">请选择option>
<option value="1">博士option>
<option value="2">硕士option>
<option value="3">本科option>
<option value="4">大专option>
<option value="5">高中option>
<option value="6">初中option>
<option value="7">小学option>
select>
td>
<td>td>
tr>
table>
<input type="submit" value="提交" id="submit-id">
<input type="reset" value="重置" id="reset-id">
form>
div>
body>
CSS代码：
JavaScript代码：
<script>
//验证错误后提示的变化
function error(str, tip) {
tip.style.color = "rgba(255, 65, 65, 0.623)";
str.style.border = "2px solid #ADD8E"
// 鼠标再次获得焦点，提示为空，输入框为空
str.onfocus = function () {
str.value = "";
tip.innerHTML = "";
}
}
//验证成功后提示的变化
function success(str, tip) {
tip.innerHTML = "√";
tip.style.color = "#333";
// 鼠标再次获得焦点，提示为空
str.onfocus = function () {
tip.innerHTML = "";
}
}
//验证为空时
function strNull(str, tip) {
tip.style.color = "rgba(255, 65, 65, 0.623)";
// 鼠标再次获得焦点，提示为空，输入框为空
str.onfocus = function () {
str.value = "";
tip.innerHTML = "";
}
}
//验证登录账号
function checkUname() {
//获取账号
var uname = document.myform.uname;
//获取提示信息
var tip = document.getElementsByTagName("tr")[0].getElementsByTagName("td")[2];
//执行验证(\w表示字母、数字、下划线 {6,18}表示6~18位)
if (uname.value != "") {
if (uname.value.match(/^\w{6,18}$/) == null) {
tip.innerHTML = "6~18位有效字符(字母、数字、下划线)";
error(uname, tip);
return false;
} else {
success(uname, tip);
return true;
}
//输入框为空时提醒
} else {
tip.innerHTML = "账号不能为空！";
strNull(uname, tip);
return false;
}
}
//验证登录密码
function checkPass() {
//获取密码
var pass = document.myform.pass;
//获取提示信息
var tip = document.getElementsByTagName("tr")[1].getElementsByTagName("td")[2];
//执行验证(6~18位任意字符)
if (pass.value != "") {
if (pass.value.match(/[\s\S]{6,18}/) == null) {
tip.innerHTML = "6~18位任意字符";
error(pass, tip);
return false;
} else {
success(pass, tip);
return true;
}
//输入框为空时提醒
} else {
tip.innerHTML = "密码不能为空！";
strNull(pass, tip);
return false;
}
}
//验证重复密码
function checkAgainpass() {
//获取重复密码
var againpass = document.myform.againpass;
//获取密码
var pass = document.myform.pass;
//获取提示信息
var tip = document.getElementsByTagName("tr")[2].getElementsByTagName("td")[2];
//执行验证
if (againpass.value != "") {
if (againpass.value != pass.value) {
tip.innerHTML = "两次密码不一致";
error(againpass, tip);
return false;
} else {
success(againpass, tip);
return true;
}
//输入框为空时提醒
} else {
tip.innerHTML = "重复密码不能为空！";
strNull(againpass, tip);
return false;
}
}
//验证性别
function checkSex() {
//获取性别
var sex = document.myform.sex;
//获取提示信息
var tip = document.getElementsByTagName("tr")[3].getElementsByTagName("td")[2];
//执行验证
if (sex.value == "0" || sex.value == "1") {
success(sex, tip);
return true;
} else {
tip.innerHTML = "必须选择一个";
strNull(sex, tip);
return false;
}
}
//验证年龄
function checkAge() {
//获取年龄
var age = document.myform.age;
//获取提示信息
var tip = document.getElementsByTagName("tr")[4].getElementsByTagName("td")[2];
//执行验证
if (age.value != "") {
if (age.value == 0 || age.value.match(/^[0-9]{2}$/) == null) {
tip.innerHTML = "大于0的任意两位整数";
error(age, tip);
return false;
} else {
success(age, tip);
return true;
}
//输入框为空时提醒
} else {
tip.innerHTML = "年龄不能为空！";
strNull(age, tip);
return false;
}
}
//验证手机号
function checkTel() {
//获取手机号
var tel = document.myform.tel;
//获取提示信息
var tip = document.getElementsByTagName("tr")[5].getElementsByTagName("td")[2];
//执行验证
if (tel.value != "") {
if (tel.value.match(/^[1][0-9]{10}$/) == null) {
tip.innerHTML = "由1开头的11位整数";
error(tel, tip);
return false;
} else {
success(tel, tip);
return true;
}
//输入框为空时提醒
} else {
tip.innerHTML = "手机号不能为空！";
strNull(tel, tip);
return false;
}
}
//验证邮箱
function checkEmail() {
//获取邮箱
var email = document.myform.email;
//获取提示信息
var tip = document.getElementsByTagName("tr")[6].getElementsByTagName("td")[2];
//执行验证
if (email.value != "") {
if (email.value.match(/^\w+@\w+(\.\w+){1,2}$/) == null) {
tip.innerHTML = "请输入有效的Email地址";
error(email, tip);
return false;
} else {
success(email, tip);
return true;
}
//输入框为空时提醒
} else {
tip.innerHTML = "邮箱不能为空！";
strNull(email, tip);
return false;
}
}
//验证学历
function checkEdu() {
//获取学历
var education = document.myform.education;
//获取提示信息
var tip = document.getElementsByTagName("tr")[7].getElementsByTagName("td")[2];
//执行验证
if (education.value == "1" || education.value == "2" || education.value == "3"
|| education.value == "4" || education.value == "5" || education.value == "6"
|| education.value == "7") {
success(education, tip);
return true;
} else {
tip.innerHTML = "必须选择一个学历";
strNull(education, tip);
return false;
}
}
//表单提交
function doSubmit() {
return checkUname() && checkPass() && checkAgainpass() && checkSex() && checkAge() && checkTel() && checkEmail() && checkEdu();
}
//点击重置，清空提示
function doReset() {
//获取提示信息
var tip = document.getElementsByTagName("tr");
for (var i = 0; i < tip.length; i++) {
tip[i].getElementsByTagName("td")[2].innerHTML = "";
}
}
</script>