以前忽略了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验证及日期显示的更多相关文章

  1. HTML5中与页面显示相关的API

    1.HTML5中与页面显示相关的API 在HTML5中,增加了几个与页面显示相关的API,其中一个是Page Visibility API Page Visibility API  是指当页面变为最小 ...

  2. iOS不得姐项目--精华模块上拉下拉的注意事项,日期显示,重构子控制器,计算cell的高度(只计算一次),图片帖子的显示

    一.上拉下拉注意事项 使用MJRefresh中的上拉控件自动设置透明 当请求下页数据通过page的时候,注意的是上拉加载更多数据失败的问题,下拉加载数据失败了,页数应该还原.或者是请求成功的时候再将页 ...

  3. ios日期显示NaN

    ios中js通过getMonth()获取到的日期显示NaN,而在其他地方如pc.安卓都是ok的,这是为什么呢,原来这里有个ios的兼容问题,需要将日期中的“-”替换为“/” var time = ne ...

  4. SilverLight:基础控件使用(4)-日期显示和选择类控件

    ylbtech-SilverLight-Basic-Control:基础控件使用(4)-日期显示和选择类控件 Calendar,DatePicker 1.A,返回顶部 Calendar控件(日期控件) ...

  5. MVVM架构~knockoutjs系列之验证成功提示显示

    返回目录 对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.is ...

  6. js正则表单验证汇总,邮箱验证,日期验证,电话号码验证,url验证,信用卡验证,qq验证

    本文主要汇总各种正则验证,很多都是转载,本人也会尽可能验证准确性,如有错误欢迎留言 //trim()方法在有些浏览器中不兼容,最好自己重写一下 String.prototype.trim=functi ...

  7. jquery validate 自定义验证方法 日期验证

    jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方 ...

  8. Highcharts使用=====通过指定日期显示曲线

    1.说明: 利用HighStock显示曲线,在右上角的日期间隔选择好日期后,重新请求后台数据,重新加载曲线. 2.实现方法: 在HighStock的rangeSelector中有一个属性inputDa ...

  9. 对Spring from中日期显示格式化问题

    开始时间 结束时间 保存 取消 想在input中让日期格式显示为HH:ss 但是各种百度没有找到答案 最后Google之 http://stackoverflow.com/questions/1173 ...

随机推荐

  1. 暴力求解——POJ 1321 棋盘问题

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  2. bzoj 1055 [HAOI2008]玩具取名(区间DP)

    1055: [HAOI2008]玩具取名 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1258  Solved: 729[Submit][Statu ...

  3. 搜索——[HAOI2012]添加号

    题目:[HAOI2012]添加号 描述: [题目描述] 有一个由数字1,2,…9组成的数字串(长度不超过8),问如何将M(M<=5)个加号"+"插入到这个数字串中,使所形成的 ...

  4. 《University Calculus》-chape4-导数的应用-微分中值定理

    罗尔定理:如果函数f(x)在[a,b]上连续并且在(a,b)处处可微,并且有f(a) = f(b),则我们必然何以找到一个c∈(a,b),使得f’(c) = 0. 证明:我们从函数f(x)的最大值和最 ...

  5. SRM149 - SRM150(少SRM150-DIV1-LV3)

    SRM 149 DIV2 1000pt 题意: 对于n个人,第i人有pi的钱.将他们分成不超过四个组,每组统一交费x,对每个人,若他拥有的钱超过x则交费,否则不交费.问最多能使这些人交多少钱. 1&l ...

  6. hdoj 1513 Palindrome【LCS+滚动数组】

    Palindrome Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  7. 005_MyEclipse编码设置

    方法一: 1.打开MyEclipse,windows---->Preferences打开"首选项"对话框. 2.左侧导航,导航中找到general---->Worksp ...

  8. [置顶] 步步辨析JS中的对象成员

    前提 首先我们应该明白创建一个JS对象的具体实例是实例化的过程,而实例化是通过new关键字实现的,这个对象是含有constructor的,一般的核心对象都会具有constructor以便创建其实例.因 ...

  9. 如何从硬盘安装fedora 19 (How to install fedora 19 from hard drive, Fedora-19-i386-DVD.iso)

    现在fedora 19出来了, 它的安装界面与跟fedora 18相同,都是metro UI. 不过现在官方已经不再推荐下载i386,而是x86-64位了,是不是现在x86-64已经把兼容性做得很好了 ...

  10. PHP安全编程:HTTP请求欺骗(转)

    一个比欺骗表单更高级和复杂的攻击方式是HTTP请求欺骗.这给了攻击者完全的控制权与灵活性,它进一步证明了不能盲目信任用户提交的任何数据. 为了演示这是如何进行的,请看下面位于http://exampl ...