文档章节

jquery实现网页自动添加必填项图标和日期自动填充

milin
 milin
发布于 2014/12/15 23:29
字数 293
阅读 31
收藏 0

<html>
<head>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type="text/javascript">
$(function(){
	//如果是必填的,则加红星标识.
	$("form label.required").each(function(){
		var $required = $('<font color="red">*</font>'); //创建元素
		$(this).after($required); //然后将它追加到文档中
	});
	
	//自动填充日期,addDay 日加,addMonth 月加,addYear 年加
	$("input.autoFillDate").each(function(i){
		$(this).val(autoFillDate($(this).attr("addYear"),$(this).attr("addMonth"),$(this).attr("addDay")));
	});
});

//自动填充日期
function autoFillDate(year,month,day){
	var myDate= new Date();
	if(year){
		myDate.setFullYear(myDate.getFullYear()+parseInt(year));
	}
	if(month){
		myDate.setMonth(myDate.getMonth()+parseInt(month));
	}
	if(day){
		myDate.setDate(myDate.getDate()+parseInt(day));
	}
	var month = myDate.getMonth()+1;
	var day = myDate.getDate();
	return myDate.getFullYear()+"-"+((month+"").length == 1 ? "0"+month : month)+"-"+((day +"").length == 1 ? "0"+day : day);
}
</script>
</head>

<body>

	<form>
		<table boder ="1">
		<tr>
			<td>
				<label class="required">姓名:</label>
			<td>
			<td>
				<input type="text" />
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">日期:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate"/>
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">年加一:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate" addYear="1"/>
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">月加一:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate" addMonth="1"/>
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">日加一:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate" addDay="1"/>
			</td>
		</tr>
		<tr>
			<td>
				<label class="required">都加一:</label>
			<td>
			<td>
				<input type="text" class="autoFillDate" addYear="1" addMonth="1" addDay="1"/>
			</td>
		</tr>
	</form>

</body>
</html>


运行效果图:

© 著作权归作者所有

milin
粉丝 10
博文 94
码字总数 19598
作品 0
郑州
高级程序员
私信 提问
JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒
2018/05/10
0
0
20个jQuery插件,帮你打造完美网页表单

网页表单主要是用来从用户那里收集一些必要的信息,是网页设计中不可或缺的一环。一个设计良好的表单能更有效的获取用户信息,也会给用户带来更好地使用体 验。基于这一点,很多设计师开始使...

鉴客
2012/03/31
4.9K
13
简单好用的表单校验插件——jQuery Validate基本使用方法总结

jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0 1.基本用法 从字面就知道既然是jquery的插件,首先得引入...

Gaia_bing
2018/07/20
0
0
9款开发者值得一试的jQuery全新应用

jQuery是一个非常给力的JS框架,也因其使用方便而诞生了无数的jQuery应用插件,今天向大家分享9款全新的jQuery插件,前段开发者应该会比较喜欢。 1、jQuery图标选项卡上下滑动切换 这是一款非...

yykj
2013/10/28
808
5
2016 年12月13个优秀的 jQuery 插件

1.Uppy Uppy是一个模块化文件上传插件,能够无缝集成任何框架。 支持从本地磁盘,Google云端硬盘,Dropbox,Instagram,远程URL,摄像机或其它位置提取文件,然后将其上传到最终目的地。 它具...

pe_mail2006
2016/12/07
4.3K
3

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
7
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
6
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
8
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部