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:
javascript form验证、完善 第24节的更多相关文章
- Nodejs之MEAN栈开发（四）---- form验证及图片上传
这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...
- tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...
- form验证及图片上传
form验证及图片上传 这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/ ...
- python自动化开发-[第二十一天]-form验证,中间件,缓存,信号,admin后台
今日概要: 1.form表单进阶 2.中间件 3.缓存 4.信号 5.admin后台 上节课回顾 FBV,CBV 序列化 - Django内置 - json.dumps(xxx,cls=) Form验 ...
- 本博文将一步步带领你实现抽屉官网的各种功能：包括登陆、注册、发送邮箱验证码、登陆验证码、页面登陆验证、发布文章、上传图片、form验证、点赞、评论、文章分页处理以及基于tronado的后端和ajax的前端数据处理。
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tronado的后端和ajax的 ...
- javascript form表单常用的正则表达式
form验证时常用的几个正则表达式 座机: \d{3,4}-\d{7,8} 手机号: /^1[34578][0-9]{9}$/ (\86)?\s+1[34578]\d{0-9} (\+86)?\s*1 ...
- Python Django的分页，Form验证，中间件
本节内容 Django的分页 Form 中间件 1 Django 分页 1.1 Django自带的分页 1.首先来看下我的测试数据环境 ############ models.py ######### ...
- JavaScript 初学者应知的 24 条最佳实践
原文:24 JavaScript Best Practices for Beginners (注:阅读原文的时候没有注意发布日期,觉得不错就翻译了,翻译到 JSON.parse 那一节觉得有点不对路才 ...
- 关于去除Eclipse对JavaScript的验证
关于去除Eclipse对JavaScript的验证 在我们使用大量JavaScript作为一些UI或其他组件来使用时,很多情况下,明明引用的这些JavaScript是可以正常使用的,但Eclipse却 ...
随机推荐
- hdoj 2829 Lawrence 四边形不等式优化dp
dp[i][j]表示前i个,炸j条路,并且最后一个炸在i的后面时,一到i这一段的最小价值. dp[i][j]=min(dp[i][k]+w[k+1][i]) w[i][j]表示i到j这一段的价值. # ...
- 有return的情况下try catch finally的执行顺序（最有说服力的总结）
结论:1.不管有木有出现异常,finally块中代码都会执行:2.当try和catch中有return时,finally仍然会执行:3.finally是在return后面的表达式运算后执行的(此时并没 ...
- 如何创建一个有System用户权限的命令行
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何创建一个有System用户权限的命令行.
- Azure 云服务中的实例端点
Azure云服务(cloud Servive)中有三种端点类型(endpoint type):输入端点(input);内部端点(internal);实例端点(InstanceInput) 1.输入端点 ...
- Redis实战之Redis + Jedis
用Memcached,对于缓存对象大小有要求,单个对象不得大于1MB,且不支持复杂的数据类型,譬如SET 等.基于这些限制,有必要考虑Redis! 相关链接: Redis实战 Redis实战之Redi ...
- java.io.File中的pathSeparator与separator的区别
先总的说一下区别:File.pathSeparator指的是分隔连续多个路径字符串的分隔符,例如:java -cp test.jar;abc.jar HelloWorld就是指“;” Fi ...
- 最近看了点C++，分享一下我的进度吧！
#include <iostream> #include <cmath> #include <iomanip> using namespace std; //Stu ...
- ThinkPHP3.1快速入门（12）自动验证
自动验证是ThinkPHP模型层提供的一种数据验证方法,可以在使用create创建数据对象的时候自动进行数据验证. 验证规则 数据验证可以进行数据类型.业务规则.安全判断等方面的验证操作.数据验证有两 ...
- [Javascript + lodash] sortBy and sortedIndex
sortBy: var collection = ['John', 'Petteri', 'Antti', 'Joonas', 'Zhentian']; var sorted = _.sortBy(c ...
- iOS 应用开发中的断点续传实践总结
断点续传概述 断点续传就是从文件上次中断的地方开始重新下载或上传数据,而不是从文件开头.(本文的断点续传仅涉及下载,上传不在讨论之内)当下载大文件的时候,如果没有实现断点续传功能,那么每次出现异常或者 ...