<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript">
//验证码
function createCode(){
var code = Math.floor(Math.random()*9000+1000)
var span = document.getElementById("codeSpan")
span.innerHTML=code
return code
}
//验证用户名
function codeUser(){
return codedata("user",/^[\u4e00-\u9fa5]{2,4}$/)
}
//验证密码
function codePassword(){
return codedata("password",/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/)
return codePassword2()
}
//校验密码
function codePassword2(){
//获取第一次密码
var pwd =document.getElementById("password").value
//获取第二次密码
var pwd2 =document.getElementById("password2").value
//比较两次密码是否相同
var span =document.getElementById("password2Span")
if(pwd2==""||pwd2==null){
span.innerHTML="确认密码不能为空"
return false
}else if(pwd2=pwd){
span.innerHTML="ok"
return true
}else{
span.innerHTML="两次密码不一致"
return false
}
}
//验证手机号
function codePhone(){
return codedata("phone",/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/)
}
//验证邮箱
function codeEmail(){
return codedata("email",/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)
}
//封装
function codedata(a,reg1){
//获取用户的用户信息
var user = document.getElementById(a).value
var span = document.getElementById(a+"Span")
var alt = document.getElementById(a).alt
//创建校验规则
var reg=reg1;
//校验
if(user==""|| user==null){
span.innerHTML=alt+"不能为空"
return false
}else if(reg.test(user)){
span.innerHTML=alt+"ok"
return true
}else{
span.innerHTML=alt+"不符合规则"
return false
}
}
//验证籍贯
function codeCity(){
//获取用户选择的数据
var sel=document.getElementById("city").value;
//获取span
var span=document.getElementById("citySpan");
//校验
if(sel!=0){
span.innerHTML="籍贯选择成功"
return true
}else{
span.innerHTML="籍贯不能为空"
return false
}
}
//验证爱好
function codeHobby(){
//获取爱好
var hobbys = document.getElementsByName("hobby")
var span = document.getElementById("hobbySpan")
for(var i =0;i<hobbys.length;i++){
if(hobbys[i].checked){
span.innerHTML="选择爱好成功"
return true
}
}
span.innerHTML="爱好至少选择一项"
return false
}
//校验是否同意公司协议
function checkAgree(){
document.getElementById("zc").disabled=!document.getElementById("agree").checked;
}
//提交判断
function checkSub(){
codeUser();
codePassword();
codePassword2();
codePhone();
codeEmail();
codeCity();
codeHobby();
return codeUser()&&codePassword()&&codePassword2()&&codePhone()&&codeEmail()&&codeCity()&&codeHobby();
}
</script>
</head>
<body onload="createCode()">
<div>
<form name="" action="demo01.html" onsubmit="return checkSub()">
用户名：<input type="text" name="user" id="user" value="" onblur="codeUser()" alt="用户名"><span id="userSpan"></span><br>
密码：<input type="password" name="password" id="password" onblur="codePassword()" alt="密码"><span id="passwordSpan"></span><br>
确认密码：<input type="password" name="password2" id="password2" onblur="codePassword2()"><span id="password2Span"></span><br>
手机号：<input type="text" name="phone" id="phone" alt="手机号" onblur="codePhone()" alt="手机号"><span id="phoneSpan"></span><br>
邮箱：<input type="text" name="email" id="email" alt="邮箱" onblur="codeEmail()"><span id="emailSpan"></span><br>
性别： 男<input type="radio" name="sex" id="man" checked="checked">
女<input type="radio" name="sex" id="feman"><br>
籍贯：<select id="city" name="city" onchange="codeCity()">
<option value="0">-请选择-</option>
<option value="1">广州</option>
<option value="2">上海</option>
<option value="3">北京</option>
</select><span id="citySpan"></span><br>
爱好：<input type="checkbox"name="hobby" value="lol" onclick="codeHobby()">LOL
<input type="checkbox"name="hobby" value="sleep" onclick="codeHobby()">睡觉
<input type="checkbox"name="hobby" value="eat" onclick="codeHobby()">吃饭
<input type="checkbox"name="hobby" value="listen" onclick="codeHobby()">听歌
<span id="hobbySpan"></span>
<br>
个人介绍:<textarea name="inc"></textarea><br>
验证码：<input type="text" name="code" id="code" ><span id="codeSpan" onclick="createCode()"></span><br>
<input type="checkbox"name="agree" id="agree" onclick="checkAgree()" >是否同意本公司协议<br>
<input type="submit" name="zc" id="zc" value="立即注册" disabled="disabled">
</form>
</div>
</body>
</html>
