js实现表单

	<html>
	<head>
	<title>表单页面</title>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

	<script>
	function checkData(){
	var canSub = true;

	//非空校验
	canSub = checkNull("username","用户名不能为空！") && canSub;
	canSub = checkNull("password","密码不能为空！")&& canSub;
	canSub = checkNull("password2","确认密码不能为空！")&& canSub;
	canSub = checkNull("nickname","昵称不能为空！")&& canSub;
	canSub = checkNull("email","邮箱不能为空！")&& canSub;
	canSub = checkNull("valistr","验证码不能为空！")&& canSub;
	canSub = checkNull("img","头像不能为空！")&& canSub;
	//描述信息非空校验
	document.getElementById("desc_msg").innerText = "";
	var desc = document.getElementsByName("desc")[0];
	if(desc.value == "请输入描述信息~！"){
	document.getElementById("desc_msg").innerText = "描述信息不能为空！";
	canSub = false;
	}

	//爱好非空校验
	document.getElementById("like_msg").innerText = "";
	var likes = document.getElementsByName("like");
	var hasLike = false;
	for(var i = 0;i<likes.length;i++){
	if(likes[i].checked == true){
	hasLike = true;
	break;
	}
	}
	if(!hasLike){
	document.getElementById("like_msg").innerText = "爱好不能为空！";
	canSub = false;
	}

	//性别非空校验
	document.getElementById("gender_msg").innerText = "";
	var genders = document.getElementsByName("gender");
	var hasGender = false;
	for(var i = 0;i<genders.length;i++){
	if(genders[i].checked == true){
	hasGender = true;
	break;
	}
	}
	if(!hasGender){
	document.getElementById("gender_msg").innerText = "性别不能为空！";
	canSub = false;
	}

	//两次密码一致的校验
	var psw1 = document.getElementsByName("password")[0].value;
	var psw2 = document.getElementsByName("password2")[0].value;
	if(psw1 != "" && psw2 !="" && psw1 != psw2){
	document.getElementById("password2_msg").innerText = "两次密码不一致！";
	canSub = false;
	}

	//邮箱格式的校验
	var email = document.getElementsByName("email")[0].value;
	if(email.value != "" && !/^w+@w+(.w+)+$/.test(email)){
	document.getElementById("email_msg").innerText = "邮箱格式不正确！";
	canSub = false;
	}

	return canSub;
	}

	/检验非空公共方法/
	function checkNull(name,msg){
	document.getElementById(name+"_msg").innerText = "";
	var tag = document.getElementsByName(name)[0];
	if(tag.value == ""){
	document.getElementById(name+"_msg").innerText = msg;
	return false;
	}
	return true;
	}

	//描述信息处理
	function descFocus(obj){
	if(obj.value == "请输入描述信息~！"){
	obj.value = "";
	}
	}
	function descBlur(obj){
	if(obj.value == ""){
	obj.value = "请输入描述信息~！";
	}
	}
	</script>
	<style type="text/css">
	span{
	color:red;
	font-size:12px;
	}
	</style>
	</head>
	<body>
	<form action="http://localhost:8080" method="POST" onsubmit="return checkData()">
	<table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink">
	<caption><font color="red" size="6">注册表单</font></caption>
	<input type="hidden" name="id" value="9527"/>
	<tr>
	<td>用户名:</td>
	<td><input type="text" name="username" /> <span id="username_msg"></span></td>
	</tr>
	<tr>
	<td>密码:</td>
	<td><input type="password" name="password"/> <span id="password_msg"></span></td>
	</tr>
	<tr>
	<td>确认密码:</td>
	<td><input type="password" name="password2"/> <span id="password2_msg"></span></td>
	</tr>
	<tr>
	<td>性别：</td>
	<td>
	<input type="radio" name="gender" value="男"/>男
	<input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span>
	</td>
	</tr>
	<tr>
	<td>昵称：</td>
	<td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td>
	</tr>
	<tr>
	<td>邮箱：</td>
	<td><input type="text" name="email"/> <span id="email_msg"></span></td>
	</tr>
	<tr>
	<td>爱好：</td>
	<td>
	<input type="checkbox" name="like" value="lq"/>篮球
	<input type="checkbox" name="like" value="zq"/>足球
	<input type="checkbox" name="like" value="qq"/>铅球
	<input type="checkbox" name="like" value="blq"/>玻璃球
	<span id="like_msg"></span>
	</td>
	</tr>
	<tr>
	<td>客户类型：</td>
	<td>
	<select name="type">
	<option value="pm">平民</option>
	<option value="sxdy">少先队员</option>
	<option value="gqty">共青团员</option>
	<option value="ybdy">预备党员</option>
	<option value="zsdy">正式党员</option>
	</select>
	<span id="type_msg"></span>
	</td>
	</tr>
	<tr>
	<td>头像：</td>
	<td>
	<input type="file" name="img"/> <span id="img_msg"></span>
	</td>
	</tr>
	<tr>
	<td>描述信息：</td>
	<td>
	<textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span>
	</td>
	</tr>
	<tr>
	<td>验证码：</td>
	<td>
	<input type="text" name="valistr"/>
	<img src="1.jpg" width="100px" height="20px"/>
	<span id="valistr_msg"></span>
	</td>
	</tr>
	<tr>
	<td colspan="2" align="right">
	<input type="submit" value="提交"/>
	<input type="reset" value="重置"/>
	</td>
	</tr>
	</table>
	</form>
	</body>
	</html>