<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:
