以前忽略了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. 
						
  2. iOS不得姐项目--精华模块上拉下拉的注意事项,日期显示,重构子控制器,计算cell的高度(只计算一次),图片帖子的显示
		
    一.上拉下拉注意事项 使用MJRefresh中的上拉控件自动设置透明 当请求下页数据通过page的时候,注意的是上拉加载更多数据失败的问题,下拉加载数据失败了,页数应该还原.或者是请求成功的时候再将页 ...
    
		
    3. 
						
  3. ios日期显示NaN
		
    ios中js通过getMonth()获取到的日期显示NaN,而在其他地方如pc.安卓都是ok的,这是为什么呢,原来这里有个ios的兼容问题,需要将日期中的“-”替换为“/” var time = ne ...
    
		
    4. 
						
  4. SilverLight：基础控件使用（4）-日期显示和选择类控件
		
    ylbtech-SilverLight-Basic-Control:基础控件使用(4)-日期显示和选择类控件 Calendar,DatePicker 1.A,返回顶部 Calendar控件(日期控件) ...
    
		
    5. 
						
  5. MVVM架构~knockoutjs系列之验证成功提示显示
		
    返回目录 对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.is ...
    
		
    6. 
						
  6. js正则表单验证汇总，邮箱验证，日期验证，电话号码验证，url验证，信用卡验证，qq验证
		
    本文主要汇总各种正则验证,很多都是转载,本人也会尽可能验证准确性,如有错误欢迎留言 //trim()方法在有些浏览器中不兼容,最好自己重写一下 String.prototype.trim=functi ...
    
		
    7. 
						
  7. jquery validate 自定义验证方法 日期验证
		
    jquery validate有很多验证规则,但是更多的时候,需要根据特定的情况进行自定义验证规则. 这里就来聊一聊jquery validate的自定义验证. jquery validate有一个方 ...
    
		
    8. 
						
  8. Highcharts使用=====通过指定日期显示曲线
		
    1.说明: 利用HighStock显示曲线,在右上角的日期间隔选择好日期后,重新请求后台数据,重新加载曲线. 2.实现方法: 在HighStock的rangeSelector中有一个属性inputDa ...
    
		
    9. 
						
  9. 对Spring from中日期显示格式化问题
		
    开始时间 结束时间 保存 取消 想在input中让日期格式显示为HH:ss 但是各种百度没有找到答案 最后Google之 http://stackoverflow.com/questions/1173 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 吐血原创：mini2440和win7笔记本利用无路由功能的交换机共享上网（使用x-router软路由）
			
    真的是要吐血了,为了使自己的win7系统笔记本和mini2440,通过交换机(没有路由功能,才5口,和HUB差不多)共享宽带上网,并且连接上的宽带还是长城宽带,我用尽各种cmd命令都查不到长城宽带的默 ...
    
			
    2. 
						
  2. geopy使用详解
			
    由于专业需要,经常接触一些地理处理的工具包,文档都是英文的,自己看的同时将其翻译一下,一方面自己学习的同时有个记录,要是能同时给一起的学习的童鞋们一些帮助,想想也是极好的.以下的文档内容主要翻译自官方 ...
    
			
    3. 
						
  3. Android开发必知--自定义Toast提示
			
    开发过Android的童鞋都会遇到一个问题,就是在打印Toast提示时,如果短时间内触发多个提示,就会造成Toast不停的重复出现,直到被触发的Toast全部显示完为止.这虽然不是什么大毛病,但在用户 ...
    
			
    4. 
						
  4. J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题
			
    J2EE 关于WebLogic下应用使用URL.openConnection获取连接返回 HttpsURLConnection与SOAPHttpsURLConnection的问题 2012年03月09 ...
    
			
    5. 
						
  5. IntelliJ IDEA安装 一些配置
			
    idea 配置修改 本篇 参考https://blog.liyang.io/234.html. 1.修改IDEA菜单的字体大小: 单击File | Project Structure菜单项,打开Pro ...
    
			
    6. 
						
  6. 在Quick-cocos2dx中使用云风pbc解析Protocol Buffers，支持win、mac、ios、android
			
    本例主要介绍 如何将 pbc 集成到quick-cocos2dx框架中,让我们的cocos2dx客户端Lua拥有编解码Protocol Buffers能力. 参考: 云风pbc的用法: http:// ...
    
			
    7. 
						
  7. FACTORY设计模式【让吃货也能理解的程序】
			
    一个人要有思想,技术再牛的人,如果没有一点点文化气氛,那么也是个码农,不能追到女朋友滴. 我这个人文化真心不多,但是比较喜欢读古诗文.虽然读完之后,记在脑海里的不多,不过,就讨一个喜欢[读]. Lee ...
    
			
    8. 
						
  8. oracle中imp命令具体解释
			
    oracle中imp命令具体解释 Oracle的导入有用程序(Import utility)同意从数据库提取数据,而且将数据写入操作系统文件.imp使用的基本格式:imp[username[/pass ...
    
			
    9. 
						
  9. Linux CPU数量判断，通过/proc/cpuinfo.
			
    Linux CPU数量判断,通过/proc/cpuinfo. 相同 physical id :决定一个物理处理器 如果“siblings”和“cpu cores”一致,则说明不支持超线程,或者超线程未 ...
    
			
    10. 
						
  10. Qt 学习之路 :访问网络（4）
			
    前面几章我们了解了如何使用QNetworkAccessManager 访问网络.在此基础上,我们已经实现了一个简单的查看天气的程序.在这个程序中,我们使用QNetworkAccessManager进行 ...
    
			
    11.