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: