validateform是基于html5的吗

是的

一、前言

前3篇文章实际都是为本文做铺垫的，如果以下棋表示，前三篇是普通走棋，本篇是将军！

目前市面上有不少表单验证插件，看似强大，实在糟糕！

总结下，有以下一些问题：

过多干预

包括：改变了表单元素UI, 为表单元素绑定过多事件等

布局等限制

包括：需要特定结构的布局，需要特定的类名或者ID

学习成本

包括：N多元作者自定义的属性，或者自定义的特定的数据结构

可用性

当JS出现错误的时候而无法正常运作的时候，验证就是聋子的耳朵——摆设，即使在现代浏览器下也是如此。

面向未来的表单验证

验证驱动

验证信息HTML驱动，例如HTML5中required, pattern, multiple等

验证形式

非即时响应，submit验证，如Chrome浏览器的处理；或者弱即时响应，如FireFox浏览器仅仅红色外发光。

验证交互

浮动形式，尖角指示。

换言之，所谓面向未来的表单验证，是遵循W3C HTML5规范的表单验证，我们可以从目前领先的浏览器中看到大致雏形。而本文所有展示的html5Validate表单验证插件，就是基于这个未来设计的。

二、html5Validate概述

html5Validate插件的验证机制、交互形式甚至形式与Chrome浏览器HTML5表单内置验证走的很近。在使用的时候，就是写写原生的HTML5表单代码。我只想说：走阳光大道和过独木桥的感觉是完全不一样的。

举个简单例子，一个邮箱验证，HTML5代码表示应该是下面这个样子：

<input type="email" required>

好巧的是，使用html5Validate进行表单验证的时候，也是使用上面这段HTML代码！

类似下面的绑定：

$("form").html5Validate()

于是，您在提交表单的时候会（在各个浏览器下）看到这样子的提示：

 

跟Chrome浏览器下的提示文字近似：

 

html5Validate支持我所知的HTML5验证相关的东西，如type="email", type="number", type="tel", type="url", step, min, max, required, pattern, multiple等，并有一些本地化扩展，如增加了type="zipcode"邮编等，支持type="hidden"的完整验证（HTML5中是忽略的），支持多type共存，例如type="email|tel", 可以让文本框输入邮箱或者手机号码。

type="date", type="hour", type="password"等因为不同网站规则不一样，因此，没有放在html5Validate中，不过，您可以很简单地进行扩展，使您的项目支持之，这个后面会介绍（参见 part 9-4）。

为了满足实际开发需求，额外增加了四个自定义属性值：data-key, data-target, data-min, data-max. 具体何用，下面会详细讲解。

支持自动的全角转半角。

注意：type="submit", type="reset", type="file", type="image"以及disabled的表单元素没有验证性可言，因此，下面所说的表单元素，并不包括他们。

兼容性

html5Validate通过jQuery1.4+测试，支持正常IE6-IE10浏览器，FireFox, Chrome等现代浏览器。

1.flavr—超级漂亮的jQuery扁平d出对话框     

2.轻量级触摸响应滑块插件JQuery lightSlider      

3.带37种3D动画特效的跨浏览器CSS3动画框架       

4.jquery整屏滚动插件Scrollify        

5.jquery旋转木马插件SLICK         

6.jquery文字动画插件LetterFX          

7.jquery文本翻转插件Wodry.js       

8.jquery通知插件toastr       

9.jQuery滚动执行动画插件FadeThis      

10.jquery表单验证插件Bootstrap Validator       

11.jCountdown倒计时插件jQuery           

12.iCheck不一样的checkbok         

13.Owl Carousel强大的响应式jQuery焦点图轮播插件   

14.magic-带64种动画效果的CSS3动画库     

15.jQuery实时搜索插件-HideSeek       

16.bootstrap modal对话框             

17.一款模拟CSS3动画的js插件-move.js              

18.可替代CSS3 transition和transform的jQuery插件          

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件        

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯jsd出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

用javascript进行判断，例如jQuery得validator插件等可以做到。不过html端的验证不靠谱，后台还是要验证的。因为js这东西运行在浏览器端，很容易就跳过js的检查了。

---