js——form表单验证
用js实现一个简易的表单验证
效果：
代码:
<html>
<head>
<title>js校验form表单title>
<meta charset="UTF-8" />
<style type="text/css">
/*设置背景图片*/
body {
background-image: url(img/1.jpg);
background-size: cover;
}
/*设置tr样式*/
tr {
height: 40px;
}
/*设置div样式*/
#showdiv {
border: solid 1px #FF0000;
border-radius: 10px;
width: 500px;
margin: auto;
margin-top: 40px;
}
/*设置table*/
table {
margin: auto;
color: white;
}
span {
font-size: 13px;
}
#codeSpan {
font-size: 20px;
}
style>
<script type="text/javascript">
//常见验证码
function createCode() {
//创建随机四位数字
var code = Math.floor(Math.random() * 9000 + 1000);
//获取元素对象
var span = document.getElementById("codeSpan");
//将数字存放到span中
span.innerHTML = code;
}
//验证用户名
function checkUname() {
//获取用户的用户名信息
var uname = document.getElementById("uname").value;
//创建校验规则
var reg = /^[\u4e00-\u9fa5]{2,4}$/
//获取span对象
var span = document.getElementById("unameSpan");
//开始校验
if (uname == "" || uname == null) {
//输出校验结果
span.innerHTML = "用户名不能为空";
span.style.color = "red";
return false;
} else if (reg.test(uname)) {
//输出校验结果
span.innerHTML = "用户名ok";
span.style.color = "green";
return true;
} else {
//输出校验结果
span.innerHTML = "用户名不符合规则";
span.style.color = "red";
return false;
}
}
//验证密码
function checkPwd() {
//获取用户的密码信息
var pwd = document.getElementById("pwd").value;
//创建校验规则
var reg = /^[a-z]\w{5,7}$/;
//获取span对象
var span = document.getElementById("pwdSpan");
//开始校验
if (pwd == "" || pwd == null) {
//输出校验结果
span.innerHTML = "*密码不能为空";
span.style.color = "red";
return false;
} else if (reg.test(pwd)) {
//输出校验结果
span.innerHTML = "*密码ok";
span.style.color = "green";
return true;
} else {
//输出校验结果
span.innerHTML = "*密码格式不正确";
span.style.color = "red";
return false;
}
checkPwd2();
}
//校验确认密码
function checkPwd2() {
//获取第一次密码
var pwd = document.getElementById("pwd").value;
//获取确认密码
var pwd2 = document.getElementById("pwd2").value;
//获取span对象
var span = document.getElementById("pwd2Span");
//比较两次密码是否相同
if (pwd2 == "" || pwd2 == null) {
span.innerHTML = "确认密码不能为空";
span.style.color = "red";
return false;
} else if (pwd == pwd2) {
span.innerHTML = "确认密码ok";
span.style.color = "green";
return true;
} else {
span.innerHTML = "两次密码不一致";
span.style.color = "red";
return false;
}
}
//校验手机号
function checkPhone() {
return checkField("phone", /^1[3,4,5,7,8]\d{9}$/);
}
//校验邮箱
function checkMail() {
return checkField("mail", /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$/)
}
//校验籍贯
function checkAddress() {
//获取用户选择的数据
var sel = document.getElementById("address").value;
//获取span
var span = document.getElementById("addressSpan");
//校验
if (sel != 0) {
span.innerHTML = "籍贯选择成功";
span.style.color = "green";
return true;
} else {
span.innerHTML = "籍贯不能为请选择";
span.style.color = "red";
return false;
}
}
//校验技能
function checkFav() {
//获取所有的技能
var favs = document.getElementsByName("fav");
//获取span
var span = document.getElementById("favSpan");
//遍历
for (var i = 0; i < favs.length; i++) {
if (favs[i].checked) {
span.innerHTML = "技能选择成功";
span.style.color = "green";
return true;
}
}
span.innerHTML = "技能至少选则一项";
span.style.color = "red";
return false;
}
//校验验证码
function checkCode() {
//获取提示语的span
var span = document.getElementById("checkCodeSpan");
//获取已经生成的验证码的span
var span2 = document.getElementById("codeSpan");
var code = span2.innerHTML;
//获取输入值
var inp = document.getElementById("code").value;
//开始校验
if (code == inp) {
//输出校验结果
span.innerHTML = "*验证码正确";
span.style.color = "green";
return true;
} else {
//输出校验结果
span.innerHTML = "*验证码不正确";
span.style.color = "red";
return false;
}
}
//校验是否同意公司协议
function checkAgree() {
document.getElementById("sub").disabled = !document.getElementById("agree").checked;
}
//提交判断
function checkSub() {
checkUname();
checkPwd();
checkPwd2();
checkPhone();
checkMail();
checkAddress();
checkFav();
checkCode();
return checkUname() && checkPwd() && checkPwd2() && checkPhone() && checkMail() && checkAddress() && checkFav() &&
checkCode();
}
/*-------------------------------------------------------------------------------------------------*/
//封装校验:相同的保留，不同的传参。
function checkField(id, reg) {
//获取用户数据
var inp = document.getElementById(id);
var va = inp.value;
var alt = inp.alt;
//创建校验规则
//获取span对象
var span = document.getElementById(id + "Span")
//开始校验
if (va == "" || va == null) {
//输出校验结果
span.innerHTML = alt + "不能为空";
span.style.color = "red";
return false;
} else if (reg.test(va)) {
//输出校验结果
span.innerHTML = alt + "ok";
span.style.color = "green";
return true;
} else {
//输出校验结果
span.innerHTML = alt + "不符合规则";
span.style.color = "red";
return false;
}
}
script>
head>
<body onload="createCode()">
<div id="showdiv">
<form action="#" method="get" onsubmit="return checkSub()">
<table>
<tr>
<td width="80px">用户名:td>
<td width="200px">
<input type="text" name="uname" id="uname" value="" onblur="checkUname()" alt="用户名" /><span id="unameSpan">*2-4位汉字span>
td>
tr>
<tr>
<td>密码:td>
<td>
<input type="password" name="pwd" id="pwd" value="" onblur="checkPwd()" />
<span id="pwdSpan">span>
td>
tr>
<tr>
<td>确认密码:td>
<td>
<input type="password" name="pwd2" id="pwd2" value="" onblur="checkPwd2()" />
<span id="pwd2Span">span>
td>
tr>
<tr>
<td>手机号:td>
<td>
<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()" />
<span id="phoneSpan">span>
td>
tr>
<tr>
<td>邮箱：td>
<td>
<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="checkMail()" />
<span id="mailSpan">span>
tr>
<tr>
<td>性别td>
<td>
男 <input type="radio" name="sex" id="sex" value="0" checked="checked" />
女 <input type="radio" name="sex" id="sex" value="1" />
td>
tr>
<tr>
<td>籍贯:td>
<td>
<select name="address" id="address" onchange="checkAddress()">
<option value="0">--请选择--option>
<option value="1">北京option>
<option value="2">上海option>
<option value="3">广州option>
<option value="4">深圳option>
<option value="5">武汉option>
select>
<span id="addressSpan">span>
td>
tr>
<tr>
<td>技能:td>
<td>
<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()" />java
<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()" />mysql
<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()" />linux<br />
<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()" />hadoop
<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()" />spark
<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />flink
<span id="favSpan">span>
td>
tr>
<tr>
<td>个人介绍:td>
<td>
<textarea name="intro" rows="4" cols="40" id="intro">textarea>
td>
tr>
<tr>
<td>验证码:td>
<td>
<input type="text" name="code" id="code" value="" style="width: 100px;" onblur="checkCode()" />
<span id="codeSpan" onclick="createCode()" style="background-image: url(img/2.gif);color: black;">span>
<span id="checkCodeSpan">span>
td>
tr>
<tr>
<td colspan="2" align="center"><input type="checkbox" name="" id="agree" value="" onclick="checkAgree()" />是否同意本公司协议td>
tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="" id="sub" value="立即注册" disabled="disabled" />td>
tr>
table>
form>
div>
body>
html>
图片下载链接：
https://pan.baidu.com/s/1r4jFrjL97FBZH5lBhqcdVw
提取码：rkpl