HTML5验证及日期显示
以前忽略了HTML5的强大功能，谁知有了它数据大部分都不需要自己验证，显示日历也不需要插件啦，一些小功能分享给大家
1.Email输入框,自动验证Email有效性。
<!DOCTYPE HTML>
<html>
<body>
<form action="#" method="get">
E-mail: <input type="email" name="user_email"/><br />
<input type="submit"/>
</form>
</body>
</html>
2.number数字输入，验证正确，可以设置开始结束位。
<!DOCTYPE HTML> <html> <body> <form action="#" method="get"> <input type="number" step="5" min="5"max="20" name="number" value="0"/> <input type="submit"/> </form> </body> </html>
3.URL输入框，可以验证URL输入的有效性。
<form action="#" method="get"> URL: <input type="url" name="user_email"/><br /> <input type="submit"/></form>
4.Date pickers (date, month, week, time, datetime, datetime-local)选择框，可以选择日期，时间，月，周。
<!DOCTYPE HTML>
<html>
<body>
<form action="#" method="get">
Date: <input type="date" name="user_email"/>
month : <input type="month" name="user_email"/>
week: <input type="week" name="user_email"/>
time: <input type="time" name="user_email"/>
datetime: <input type="datetime" name="user_email"/>
datetime-local : <input type="datetime-local" name="user_email"/>
<input type="submit"/>
</form>
</body>
</html>
5.datalist输入选择。
<!DOCTYPE HTML> <html> <body>
<form action="#" method="get">
Webpage: <input type="url" list="url_list"value="fdf" name="user_email"/>
<datalist id="url_list">
<option label="W3School"value="http://www.w3school.com.cn"/>
<option label="Microsoft" value="http://www.microsoft.com"/>
</datalist><input type="submit"/>
</form> </body> </html>
HTML5验证及日期显示的更多相关文章
- HTML5中与页面显示相关的API
1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API 是指当页面变为最小 ...
- iOS不得姐项目--精华模块上拉下拉的注意事项,日期显示,重构子控制器,计算cell的高度(只计算一次),图片帖子的显示
一.上拉下拉注意事项 使用MJRefresh中的上拉控件自动设置透明 当请求下页数据通过page的时候,注意的是上拉加载更多数据失败的问题,下拉加载数据失败了,页数应该还原.或者是请求成功的时候再将页 ...
- ios日期显示NaN
ios中js通过getMonth()获取到的日期显示NaN,而在其他地方如pc.安卓都是ok的,这是为什么呢,原来这里有个ios的兼容问题,需要将日期中的“-”替换为“/” var time = ne ...
- SilverLight：基础控件使用（4）-日期显示和选择类控件
ylbtech-SilverLight-Basic-Control:基础控件使用(4)-日期显示和选择类控件 Calendar,DatePicker 1.A,返回顶部 Calendar控件(日期控件) ...
- MVVM架构~knockoutjs系列之验证成功提示显示
返回目录 对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.is ...
- js正则表单验证汇总，邮箱验证，日期验证，电话号码验证，url验证，信用卡验证，qq验证
本文主要汇总各种正则验证,很多都是转载,本人也会尽可能验证准确性,如有错误欢迎留言 //trim()方法在有些浏览器中不兼容,最好自己重写一下 String.prototype.trim=functi ...
- jquery validate 自定义验证方法 日期验证
jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方 ...
- Highcharts使用=====通过指定日期显示曲线
1.说明: 利用HighStock显示曲线,在右上角的日期间隔选择好日期后,重新请求后台数据,重新加载曲线. 2.实现方法: 在HighStock的rangeSelector中有一个属性inputDa ...
- 对Spring from中日期显示格式化问题
开始时间 结束时间 保存 取消 想在input中让日期格式显示为HH:ss 但是各种百度没有找到答案 最后Google之 http://stackoverflow.com/questions/1173 ...
随机推荐
- 动态规划：NOI2013 快餐店
Description 小 T打算在城市C开设一家外送快餐店.送餐到某一个地点的时间与外卖店到该地点之间最短路径长度是成正比的,小T希望快餐店的地址选在离最远的顾客距离最近 的地方. 快餐店的顾客分布 ...
- Unique Paths II ——LeetCode
Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...
- 衬衫面料品牌：Alumo_衬衫_男装_男装：衬衫、法式衬衫、袖扣领带、西服西裤等男士正装服饰-仕族官网
衬衫面料品牌:Alumo_衬衫_男装_男装:衬衫.法式衬衫.袖扣领带.西服西裤等男士正装服饰-仕族官网 衬衫面料品牌:Alumo
- [转载]10 Best Tools For Websites And Apps Development Ever
转载自: http://www.websurfmedia.com/10-best-tools-for-websites-and-apps-development-ever/ The world i ...
- 【每日一linux命令8】添加新的工作组（groupadd）
groupadd (字意add group)增加一个新的工作组. 语法:groupadd 选项 用户组名 选项: -g 指定新建工作组的ID -r 创建系统工作组,系统工作组的ID小于500 -k 覆 ...
- loadView,viewDidLoad等几种方法的调用总结
viewDidLoad 此方法只有当view从nib文件初始化的时候才被调用.viewDidLoad用于初始化,加载时用到的. loadView 此方法在控制器的view为nil的时候被调用.虽然经常 ...
- Windows7下32位IE异常不能打开解决方法
今天更新了Update及安装了一些软件,重启电脑后发现32位IE不能正常打开,而64位IE正常. 错误信息如下: 问题签名: 问题事件名称: BEX 应用程序名: iexplore.exe 应用 ...
- log4j配置文件详解---转
使用步骤注意: 1. 从http://logging.apache.org/log4j/1.2/ 下载文件 2. 在src目录下加入log4j.properties,将jar包放入build -pat ...
- diy 电脑 重装系统
1\组装好电脑 2\硬盘的红灯只亮一会,找不到 硬盘 .bios里 硬盘设置里 IDE修改为 ACHI即可. 3\老毛桃 \ 用桌面的那个分区软件 分区 100G,300G 4\找到U盘 的iso 文 ...
- Android（java）学习笔记238：多媒体之图片画画板案例
1.首先我们编写布局文件activity_main.xml如下: <RelativeLayout xmlns:android="http://schemas.android.com/a ...