<html>
<head>
<title>js校验form表单</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
/*设置背景图片*/
body{
background-image: url(img/b.jpg);
}
/*设置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>
<!--声明js代码域-->
<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 checkAgree(){
document.getElementById("sub").disabled=!document.getElementById("agree").checked;
}
//提交判断
function checkSub(){
checkUname();
checkPwd();
checkPwd2();
checkPhone();
checkMail();
checkAddress();
checkFav();
return checkUname()&&checkPwd()&&checkPwd2()&&checkPhone()&&checkMail()&&checkAddress()&&checkFav();
}
/*-------------------------------------------------------------------------------------------------*/
//封装校验:相同的保留，不同的传参。
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>
</select>
<span id="addressSpan"></span>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" id="" value="1" onclick="checkFav()"/>LOL
<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>吃饭<br />
<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>打豆豆
<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>看电影
<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()" />听歌
<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;"/>
<span id="codeSpan" onclick="createCode()" style="background-image: url(img/code.jpg.gif);color: black;"></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>
b.jpg
code.jpg.gif
