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

最新推荐文章于 2023-03-22 11:30:00 发布
最新推荐文章于 2023-03-22 11:30:00 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： java web
  1. <html>  
  2. <head>  
  3. <script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>  
  4. <script type="text/javascript">  
  5. $(function(){  
  6.     //如果是必填的，则加红星标识.  
  7.     $("form label.required").each(function(){  
  8.         var $required = $('<font color="red">*</font>'); //创建元素  
  9.         $(this).after($required); //然后将它追加到文档中  
  10.     });  
  11.       
  12.     //自动填充日期,addDay 日加，addMonth 月加，addYear 年加  
  13.     $("input.autoFillDate").each(function(i){  
  14.         $(this).val(autoFillDate($(this).attr("addYear"),$(this).attr("addMonth"),$(this).attr("addDay")));  
  15.     });  
  16. });  
  17.   
  18. //自动填充日期  
  19. function autoFillDate(year,month,day){  
  20.     var myDate= new Date();  
  21.     if(year){  
  22.         myDate.setFullYear(myDate.getFullYear()+parseInt(year));  
  23.     }  
  24.     if(month){  
  25.         myDate.setMonth(myDate.getMonth()+parseInt(month));  
  26.     }  
  27.     if(day){  
  28.         myDate.setDate(myDate.getDate()+parseInt(day));  
  29.     }  
  30.     var month = myDate.getMonth()+1;  
  31.     var day = myDate.getDate();  
  32.     return myDate.getFullYear()+"-"+((month+"").length == 1 ? "0"+month : month)+"-"+((day +"").length == 1 ? "0"+day : day);  
  33. }  
  34. </script>  
  35. </head>  
  36.   
  37. <body>  
  38.   
  39.     <form>  
  40.         <table boder ="1">  
  41.         <tr>  
  42.             <td>  
  43.                 <label class="required">姓名:</label>  
  44.             <td>  
  45.             <td>  
  46.                 <input type="text" />  
  47.             </td>  
  48.         </tr>  
  49.         <tr>  
  50.             <td>  
  51.                 <label class="required">日期:</label>  
  52.             <td>  
  53.             <td>  
  54.                 <input type="text" class="autoFillDate"/>  
  55.             </td>  
  56.         </tr>  
  57.         <tr>  
  58.             <td>  
  59.                 <label class="required">年加一:</label>  
  60.             <td>  
  61.             <td>  
  62.                 <input type="text" class="autoFillDate" addYear="1"/>  
  63.             </td>  
  64.         </tr>  
  65.         <tr>  
  66.             <td>  
  67.                 <label class="required">月加一:</label>  
  68.             <td>  
  69.             <td>  
  70.                 <input type="text" class="autoFillDate" addMonth="1"/>  
  71.             </td>  
  72.         </tr>  
  73.         <tr>  
  74.             <td>  
  75.                 <label class="required">日加一:</label>  
  76.             <td>  
  77.             <td>  
  78.                 <input type="text" class="autoFillDate" addDay="1"/>  
  79.             </td>  
  80.         </tr>  
  81.         <tr>  
  82.             <td>  
  83.                 <label class="required">都加一:</label>  
  84.             <td>  
  85.             <td>  
  86.                 <input type="text" class="autoFillDate" addYear="1" addMonth="1" addDay="1"/>  
  87.             </td>  
  88.         </tr>  
  89.     </form>  
  90.   
  91. </body>  
  92. </html>  


运行效果图：

激情奋斗
关注
专栏目录
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
Jquery Ajax 实现自动填充地址。
12-20
Jquery Ajax 实现自动填充地址。
在必填表单项之前添加“红星”，标识为必选项
z19950712的博客
12-02 4219
html中的样式： <div id="view1" class="pt-page" style="border-top: 10px solid #fAfAfA;margin-top: 30px;"> <p id="listInput" @click="choiceGrade"> <label> 报名年纪 </label> <input type="text" readonly
必填项
qq_37904977的博客
03-21 531
bootstrap必填红心_bootstrap如何设置表单必填
weixin_39881859的博客
12-20 863
在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件然后建立一个form表单，添加表单控件，表单控件必须有绝对定位，不然会报错Form titlelabelSubmit编写js文件，通过js文件验证表单：$(function () {$("#form-test").bootstrapValidator({liv...
jQuery问卷调查表单在线编辑代码.zip
最新发布
09-21
在IT领域，jQuery是一款广泛应用于网页开发的JavaScript库，以其简洁的API和强大的功能深受开发者喜爱。本文将深入解析名为"jQuery问卷调查表单在线编辑代码.zip"的压缩包内容，旨在帮助初学者及有一定经验的开发者...
jquery培训文档
02-10
本章节详细介绍了如何利用 jQuery 和 EasyUI 库来实现 Accordion 组件。 ##### 实例 下面提供了一个简单的 Accordion 示例，通过 HTML、CSS 和 JavaScript 的结合，实现了基本的 Accordion 功能。 ```html ;...
jquery基础教程高清版PDF.part5.rar
11-24
第1章　jQuery入门　 　1.1　jQuery能做什么　 　1.2　jQuery为什么如此出色　 　1.3　第一个jQuery文档　 　1.3.1　下载jQuery　 　1.3.2　设置HTML文档　 　1.3.3　编写jQuery代码　 　1.4　小结　 第2章　选择符...
jQuery easyUI控件演示与使用指南
- 实例：DateBox 提供一个输入框，用户可以选择日期，同时支持日期格式化和日期范围限制。 - 参数：包括`formatter`、`parser`、`onSelect`等，允许自定义日期显示格式和选择回调。 - 事件：如`onChange`，在日期...
Jquery 日期控件
逍遥法外
11-24 689
jquery 提供的日期控件, 连续的月份显示Demo为 为满足开发需求,需要需要显示成 上下格式，并且需要限定指定连续日期 so: var targetDate=new Date('2013-11-22'); var targetDateEnd=new Date('2013-11-23'); $("#date_7").datepicker({ minDate:
jquery ui date 日期插件使用自由规定日期选择 及改变日期样式 增加颜色标识
空
12-04 525
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/buttons.css"> <div> <label>选择日期</label> &...
BootStrap 表单必填项添加红星
热门推荐
06-30 11万+
#BootStrap 表单必填项添加红星 一.软件描述 BootStrap 3.0 html5 二.问题描述 有一个表单我需要标注其中的必填项，如何给表单中的必填项添加一个红星。 如下图 三.解决方案 写一个样式 /* 必填红点 */ .redStar::before { content: "*"; color: #f56c6c; margin-right: 4px; } 添加到对应的标签类中即可 <div class="form-g
icon 图标
qq_55342245的博客
03-31 1023
icon 图标 属性 类型 默认值 必填 说明 type string 是 icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear size number/string 23 否 icon的大小 color string 否 icon的颜色，同css的color .js 文件 Page({ data: { iconSize: [20
JQuery验证——必填验证
weixin_46230055的博客
06-18 2155
一、引入JQuery.min.js文件 二、视图代码设计 <body> <div> @using (Html.BeginForm("Index","Home",FormMethod.Post)) { <span>用户名：@Html.TextBox("username","",new {onblur="checkUser()" })</span>
jquery - 日历插件（自定义模板的日历插件）
TBSE07022的专栏
05-23 1251
(function($){ $.fn.datetime = function(o){ //默认配置 var def = { year: 2012,//显示年 month: 5,//显示月 template:'\ \
js验证日期方法
wang_zhij的博客
07-09 735
//对日期时间格式的验证：yyyy-MM-dd functionisDate(dateStr){ vardatePat=/^(\d{4})(\-)(\d{1,2})(\-)(\d{1,2})$/; varmatchArray=dateStr.match(datePat); if(matchArrary==null){ returnfalse; } varmonth=matc...
JQueryUI Datepicker组件设置日期高亮
kongxx的专栏
11-07 5723
最近在看JQueryUI Datepicker组件的时候想到有时候我们需要高亮某些日期，而不仅仅是当前日期和选中的日期，这是我们就需要在日历组件初始化的时候给某些日期设置成高亮，以表示这些日期和其它日期有区别，比如说可以表示这些日期有一些meeting或者task。对于这种需求可以通过使用组件的beforeShowDay(date)函数来实现，这个函数会在Datepicker组件初始化的时候对于每
QLabel 标签
记忆的属性
03-22 2750
QLabel 是 PyQt6 里用来建立文字或图片的标签控件，这篇教学会介绍如何在 PyQt6 窗口里加入 QLabel 标签，并进行像是文字字型、大小、颜色和位置...等参数设定。快速预览：加入 QLabel 标签QLabel 位置设定QLabel 文字设定QLabel 加入图片使用 StyleSheet 设定 QLabel 样式。
使用JS和jQuery实现自动填充input字段
"该资源主要介绍如何使用JavaScript和jQuery实现`input`标签的自动填充功能。通过提供的代码示例，可以了解到如何利用第三方库（如jQuery UI的Autocomplete插件）以及DWR（Direct Web Remoting）服务来动态获取并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值