<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
div {
font-size: 14px;
color: #F00;
}
.inputstyle {
width: 150px;
}
</style>
<script>
//用户名验证
function checkUser(){
var user=document.getElementById("username").value;
var divUserId=document.getElementById("user_prompt");
var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
divUserId.innerHTML="";
if(reg.test(user)==false){
divUserId.innerHTML="用户名不正确";
return false;
}else{
return true;
}
}
//密码验证
function checkPass(){
var pass=document.getElementById("password").value;
var divPassId=document.getElementById("pass_prompt");
divPassId.innerHTML="";
var reg=/^[a-zA-Z0-9]{4,10}$/;
if(reg.test(pass)==false){
divPassId.innerHTML="密码输入错误";
return false;
}return true;
}
//确认密码验证
function checkRepass(){
var pass=document.getElementById("password").value;
var repass=document.getElementById("newpass").value;
var divRepassId=document.getElementById("repass_prompt");
if(pass!=repass){
divRepassId.innerHTML="两次密码不一致";
return false;
}
return true;
}
//生日验证
function checkBirth(){
var birth=document.getElementById("birthday").value;
var divBirthId=document.getElementById("birth_prompt");
divBirthId.innerHTML="";
var reg=/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
if(reg.test(birth)==false){
divBirthId.innerHTML="生日格式不正确,请输入正确的格式例如1989-03-09";
return false;
}
divBirthId.innerHTML="";
return true;
}
//邮件验证
function checkEmail(){
var emai=document.getElementById("email").value;
var divEmailId=document.getElementById("email_prompt");
divEmailId.innerHTML="";
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(reg.test(emai)==false){
divEmailId.innerHTML="邮件格式不正确，请重新输入";
return false;
}
divEmailId.innerHTML="";
return true;
}
//手机号码验证
function checkTel(){
var tel=document.getElementById("number").value;
var DivTelId=document.getElementById("number_prompt");
DivTelId.innerHTML="";
var reg=/^1\d{10}$/;
if(reg.test(tel)==false){
DivTelId.innerHTML="输入错误，请重新输入";
return false;
}
DivTelId.innerHTML="";
return true;
}
//性别验证
function checkgender(){
var genArray=document.getElementsByName("gender");
var genValue="";
for(var i=0;i<genArray.length;i++){
//alert(genArray[i].checked+" "+genArray[i].name + " "+ genArray[i].value);
if(genArraay[i].checked==true){//得到选中的单选按钮状态
genValue=genArray[i].value;
}
}
if(genValue!=null&&genValue!=" "){
alert("genValue"+genValue);
}else{
alert("请选择性别");
}
}
//多选框的验证
function checkHobby(){
var hobb=document.getElementsByName("hobby");
for(var i=0;i<hobb.length;i++){
hobb[i].checked=document.getElementById("all").checked;
}}
//省份验证
var cityList=new Array();
cityList ["甘肃省"]=["武威市","天水市","兰州市"];
cityList['海南省'] = ['海口市'];
cityList['福建省'] = ['福州市','厦门市','泉州市','漳州市'];
cityList['山东省'] = ['济南市','青岛市','烟台市'];
cityList['江西省'] = ['江西省','南昌市'];
cityList['广西省'] = ['柳州市','南宁市'];
function changeCity(){
var pro=document.getElementById("province").value;
var city=document.getElementById("city");
city.options.length=0;
for(var i in cityList){
if(i==pro){
for(var j in cityList[i]){
city.add(new Option (cityList[i][j],cityList[i][j]),null);
}
}
}
}
function allCity(){
var pro=document.getElementById("province");
for(var i in cityList){
pro.add(new Option(i,i),null);
}
}
window.onload=allCity;
//回车登录
function checkData(){
if(!checkUser()){
alert("请输入正确的用户名");
return false;
}
var keynum;
if(window.event){
keynum=event.keyCode();
}else if(event.which){
keynum=event.which;
}
if(keynum==13){
subMit("回车键已按，请登录")
return true;
}
return true;
}
function subMit(obj){
document.form1.submit();
}</script>
</head><body onkeydown="checkData();">
<form id="form1" name="form1" method="post" action="success.html" onSubmit="return checkData()">
<table width="698" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color:#C0DFEB">
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">用户名：</td>
<td width="202" height="30" align="left" valign="middle" bgcolor="#99CCCC"><label for="textfield"></label>
<input type="text" name="username" id="username" class="inputstyle" onBlur="checkUser()"/></td>
<td width="385" align="left" valign="middle" bgcolor="#99CCCC"><div id="user_prompt">用户名由英文字母
和数字组成的4-16位字符，以字母开头</div></td>
</tr>
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">密码：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="password" name="password" id="password" class="inputstyle" onBlur="checkPass()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="pass_prompt"> 密码由英文字母和数字组成的4-10位字符 </div></td>
</tr>
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">确认密码：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="password" name="newpass" id="newpass" class="inputstyle" onblur="checkRepass()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="repass_prompt"></div></td>
</tr>
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">生日：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="text" name="birthday" id="birthday" class="inputstyle" onblur="checkBirth()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="birth_prompt"></div></td>
</tr>
<tr>
<td width="111" height="30" align="right" valign="middle" bgcolor="#99CCCC">性别：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><p>
<label>
<input type="radio" name="gender" value="男" id="gender_0" onclick="checkgender()" selected/>
男</label>
<label>
<input type="radio" name="gender" value="女" id="gender_1" onclick="checkgender()" />
女</label>
<br />
</p></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="gender_prompt"></div></td>
</tr>
<tr>
<td height="30" align="right" valign="middle" bgcolor="#99CCCC">邮件地址：</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="text" name="email" id="email" class="inputstyle" onBlur="checkEmail()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="email_prompt"></div></td>
</tr>
<tr>
<td height="30" align="right" valign="middle" bgcolor="#99CCCC">手机号码:</td>
<td height="30" align="left" valign="middle" bgcolor="#99CCCC"><input type="text" name="number" id="number" class="inputstyle" onBlur="checkTel()"/></td>
<td align="left" valign="middle" bgcolor="#99CCCC"><div id="number_prompt"></div></td>
</tr>
<tr>
<td height="30" align="right" valign="middle" bgcolor="#99CCCC">爱好：
<label for="checkbox"></label></td>
<td height="30" colspan="2" align="left" valign="middle" bgcolor="#99CCCC"><input type="checkbox" name="hobby" id="checkbox" value="唱歌">唱歌
<input type="checkbox" name="hobby" id="checkbox2" value="跳舞">
跳舞
<input type="checkbox" name="hobby" id="checkbox3" value="画画">
画画
<input type="checkbox" name="hobby" id="checkbox4" value="运动">
运动
<input type="checkbox" name="all" id="all" value="全选" onClick="checkHobby()">
全选</td>
</tr>
<tr>
<td height="30" align="right" valign="middle" bgcolor="#99CCCC">所属地：
<label for="checkbox"></label></td>
<td height="30" colspan="2" align="left" valign="middle" bgcolor="#99CCCC">省份：
<label for="select"></label>
<select name="province" id="province" class="inputstyle" onChange="changeCity()">
<option>--选择省份--</option>
</select>
城市：
<select name="city" id="city" class="inputstyle">
<option>--选择城市--</option>
</select></td>
</tr>
<tr>
<td height="30" colspan="3" align="center" valign="middle" bgcolor="#99CCCC"><input type="submit" name="submit" id="submit" value="submit提交"/>
<input type="button" name="button" id="submit" onclick="subMit('button提交');" value="button提交"/></td>
</tr>
</table>
</form>
</body>
</html>