javascript form验证、完善第24节

<html><head>	<title>Form对象</title>	<style type="text/css">	 #tip {			width:100px;			/* line-height:20px; */			background-color:white;			/*color:red;*/			border:1px solid red;			display:none;			font-size:12px;			text-align:center;			padding:3px;	 }	 	</style>	<script type="text/javascript">	    function $(id) {        return document.getElementById(id);		  }	   function setDays() {				//获取year month				var year = +$("year").value ;				var month = +$("month").value;  				//alert(year + "\n" + month);				//计算月的天数				var days = getMonthDays(year, month);				var currentDay = new Date().getDate();				//alert(days);				//输出天数				var oSelect = $("days");				oSelect.options.length = days;				for(var i = 0; i < days ; i++ ) {					oSelect.options[i].text = i + 1; 					oSelect.options[i].value = i + 1; 					console.log(currentDay ,i);					if(i == currentDay) {					console.log("===============",currentDay ,i);						oSelect.options[i].setAttribute("selected","selected");					}				}		 }		 function getMonthDays( year , month) {				if(month == 2 && (year % 400 == 0 || year %4 == 0 && year % 100 != 0)) {					 return 29;				}				var a = [0,31,28,31,30,31,30,31,31,30,31,30,31];				return a[month];		 }		 //表单验证		 function checkForm(oForm) {				//检测用户名				var name = oForm.username.value;				var pwd = oForm.password.value;				// var name = oForm.elements["username"] .value;				// alert(name);				if(name == null || name == "") {					alert("用户名不能为空");					oForm.username.focus();					return false;				}				if(pwd == null || pwd == "") {					alert("密码不能为空");					oForm.username.focus();					return false;				}				//全部验证通过				return true;      		 }		 function check(username) {			 				if(username == null || username == "" ) {					$("tip").innerHTML = "用户名不能为空";					$("tip").style.color="blue";					$("tip").style.display="inline";					oForm.username.focus();					return;				}				if(username.length < 6) {					$("tip").innerHTML = "用户名长度不能少于6个";					$("tip").style.color="blue";					$("tip").style.display="inline";					oForm.username.focus();					return;				}				$("tip").innerHTML = "用户名合法";				$("tip").style.display="inline";				$("tip").style.color="green";			}	</script>		</head>	<body onload="setDays()">	<div>表单验证</div>		1.</br>		 <form action="事件.htm" method="GET" name="form1" onsubmit="return checkForm(this)" >		 <table border="1" width="500px" cellpadding="5" cellspacing="0" align="left">			 <tr>				 <th colspan="2">注册表</th>			 </tr>	   			 <tr>				 <td align="right">姓名:</td>				 <td><input type="text" name="username" onblur="check(this.value)" />						 <span id="tip"></span>				 </td>			 </tr>			 <tr>				 <td align="right">密码:</td><td><input type="password" name="password"/></td>			 </tr>			 <tr>				 <td align="right">性别:</td>				 <td>					 <input type="radio" name="sex" value='男' checked="checked"/>男					 <input type="radio" name="sex" value='女'/>女				 </td>			 </tr>			 <tr>				 <td align="right">出生日期:</td>				 <td>					 <select name="year" id="year" onchange="setDays()">						  <script type="text/javascript">									var d = new Date();									var y = d.getFullYear();//系统当前日期									var m = d.getMonth() + 1; 								  //alert(y);									for(var i = y - 20; i < y + 10; i++ ) {										if(i == y) {											 document.write("<option value='"+i+"' selected='selected'> " + i + "</option>");										} else {											 document.write("<option value='"+i+"'> " + i + "</option>");										}									}							</script>					 </select>					 <select name="month" id="month" onchange="setDays()">							<script type="text/javascript">								  							  for(var i = 1; i < 13; i++ ) {									if(i == m) {										 document.write("<option value='"+i+"' selected='selected'> " + i + "</option>");									} else {										 document.write("<option value='"+i+"'> " + i + "</option>");									}							  }							</script>					 </select>					 <select name="days" id="days">							<script type="text/javascript">							/*								  for(var i = 1; i < 32; i++ ) {										document.write("<option value='"+i+"'> " + i + "</option>");								  }							 */							</script>					 </select>				 </td>			 </tr>			 <tr>				 <td align="right">爱好:</td>				 <td>					 <input type="checkbox" name="loves" value='足球' checked="checked"/>足球					 <input type="checkbox" name="loves" value='看书' />看书					 <input type="checkbox" name="loves" value='旅游' />旅游					 <input type="checkbox" name="loves" value='游戏' />游戏				 </td>			 </tr>			 <tr>				 <td align="right">班级:</td>				 <td>					<select name="clazz">						<option value="clazz1">clazz1</option>						<option value="clazz2" selected="seleted">clazz2</option>						<option value="clazz3">clazz3</option>						<option value="clazz4">clazz4</option>					</select>				 </td>			 </tr>			 <tr>				 <td align="right">照片:</td>				 <td>					<input type="file" name="photo" size="40"/>				 </td>			 </tr>			 <tr>				 <td align="right">个人简历:</td>				 <td>					<textarea rows="6" cols="40" name="intro">请输入....					</textarea>				 </td>			 </tr>			 <tr>							 <td colspan="2" align="center">					 <input type="submit" value="登陆"/>					 <input type="reset" value="重填"/>					 					 <input type="hidden" name="hidden" value="yfs" />				 </td>			 </tr>		 </table>	  </form></body></html>

rs: