jQuery html5Validate基于HTML5表单验证插件
1、html5Validate的优势？
面向未来的表单验证
验证驱动
验证信息HTML驱动，例如HTML5中required,pattern,multiple等验证形式
非即时响应，submit验证，如Chrome浏览器的处理；或者弱即时响应，如FireFox浏览器仅仅红色外发光。验证交互
浮动形式，尖角指示。
换言之，所谓面向未来的表单验证，是遵循W3C HTML5规范的表单验证，我们可以从目前领先的浏览器中看到大致雏形。而本文所有展示的html5Validate表单验证插件，就是基于这个未来设计的。
2、html5Validate插件的验证机制与原生HTML5验证
1) html form表单的参数novalidate或者novalidate值为false, 则浏览器内置表单验证优先，全部pass之后才轮到插件进行验证，也就是说，两者是没有冲突的；
2)novalidate为HTML5表单内置的属性（W3C草案），可以让现代浏览器（IE10+, FireFox, Chrome, Opera等）默认不对表单做验证（忽略required, pattern等）。html5Validate插件默认novalidate: true也就是说，其默认对包装器元素添加了novalidate="novalidate"，以阻止浏览器的默认验证
3、如何使用html5Validate表单验证？
1)、引入JQUERY框架
<script type="text/javascript" src="../static/lib/jquery-1.10.2.js"></script>
注：如果项目组使用artSeaConfig.js统一加载了该js，在html界面无需重复再引用。
2）、引入html5Validate插件：示意
<script type="text/javascript" src="../static/lib/jquery-html5Validate-min.js"></script>
注：如果项目组使用artSeaConfig.js统一加载了该js，在html界面无需重复再引用。
3)、html前端书写
必填：required
最大值：max="100"
最小值:min="1"
最大字符长度控制：maxlength="20"
身份证号格式：type="idCard|idCrad1"
日期格式：type="date"
邮箱格式：type="email"
数值格式：type="number"
手机号码：type="tel"
URL地址：type="url"
邮政编码:type="ZIPCODE"
radio选择必填：<div class="mb10">
<p>性别：<input type="radio" id="male" class="vn" name="sexy" required /><label for="male">先生</label>
<input type="radio" id="female" class="vn" name="sexy" required /><label for="female">女士</label></p>
</div>
下拉菜单必填：
<div class="mb10">口味：<select required>
<option value="">请选择</option>
<option value="1">很差</option>
<option value="2">差</option>
<option value="3">一般</option>
<option value="4">好</option>
<option value="5">很好</option>
</select>
复选框：除了某一个都必填
<div class="mb10">
<p>特色服务：</p>
<p><input type="checkbox" id="speServer1" class="vn" name="speServer" required /><label for="speServer1">宝宝椅</label></p>
<p><input type="checkbox" id="speServer2" class="vn" name="speServer" required /><label for="speServer2">鲜花派送</label></p>
<p><input type="checkbox" id="speServer3" class="vn" name="speServer" /><label for="speServer3">生日蛋糕</label><span class="f9 g6 ml10">除了这个其他都必选</span></p>
<p><input type="checkbox" id="speServer4" class="vn" name="speServer" required /><label for="speServer4">停车位</label></p>
</div>
textarea长度控制：
<textarea id="comment" class="w460" rows="5" data-max="100" data-min="5" required></textarea>
4)、绑定调用
前端submit提交时，在js中书写：
//html5Form为form表单Id
$("#html5Form").html5Validate(function() { // 全部验证通过，该干嘛干嘛~~
可以调用ajax方法
});
4、参数validate验证，实际开发中各类验证层出不穷
运行机制:validate插件内部是如此运作的，先执行插件内置的验证，然后，再执行validate这个验证函数，如果返回值是true，则执行我们相对表单进行的回调操作；
注意需要有Boolean类型返回值，验证出错返回false验证就会停止，效果达到提示
HTML代码：
<form> <p>输入密码：<input type ="password" id ="pwd" required data-min ="6" placeholder ="至少6个字符" /></p> <p>再次输入：<input type ="password" id ="pwdCheck" required data-min ="6" /></p> <p>你喜欢的美女（至少选择3项）：</p> <div id ="checkBox" class ="checkbox_box"><input id ="checkItem1" type ="checkbox" /><label for ="checkItem1">陈怡君</label> <input id ="checkItem2" type ="checkbox" /><label for ="checkItem2">程琳</label> <input id ="checkItem3" type ="checkbox" /><label for ="checkItem3">司马可儿</label> <input id ="checkItem4" type ="checkbox" /><label for ="checkItem4">高子文</label> <input id ="checkItem5" type ="checkbox" /><label for ="checkItem5">妮妮</label> <input id ="checkItem6" type ="checkbox" /><label for ="checkItem6">莫小诗</label> <input id ="checkItem7" type ="checkbox" /><label for ="checkItem7">ViKi</label> <input id ="checkItem8" type ="checkbox" /><label for ="checkItem8">娜娜</label> <input id ="checkItem9" type ="checkbox" /><label for ="checkItem9">周小洁</label> <input id ="checkItem10" type ="checkbox" /><label for ="checkItem10">苏小楠</label></div> <p><input type ="submit" value ="点击~"></p></form>
JS代码：
$("form").html5Validate(function() {
alert("验证全部通过！"); this.submit();//可以书写自己想调用的任何函数方法：如ajax方法 }, {
validate: function() {
if ($("#pwdCheck").val() !== $("#pwd").val()) {
$("#pwdCheck").testRemind("前后密码不一致"); return false;
} else if ($("input[type='checkbox']:checked").length < 3) {
$("#checkBox").testRemind("至少选择3项"); return false; }
return true; }});
5、针对表单单个因素的校验
HTML代码：
<p>昵称</p><input type ="nickname" class ="nickname" required data-min ="6" data-max ="20" /> 6-20个单词字符<p><a href ="javascript:" class ="button">检测</a></p>
JS代码：
OBJREG.NICKNAME = "^\\w+$";OBJREG["prompt"].nickname = "只能是字母数字以及下划线";
$(".button").bind("click", function() {
var nickname = $(".nickname"); if ($.html5Validate.isAllpass(nickname)) {
alert("验证通过！");
}});
6、正则表达式的规则添加
jquery-html5Validate.js在如下可以做相应的扩展。
// 全局对象，可扩展
OBJREG = {
EMAIL:"^[a-z0-9._%-]+@([a-z0-9-]+\\.)+[a-z]{2,4}$",
NUMBER: "^\\-?\\d+(\\.\\d+)?$",
URL:"^(http|https|ftp)\\:\\/\\/[a-z0-9\\-\\.]+\\.[a-z]{2,3}(:[a-z0-9]*)?\\/?([a-z0-9\\-\\._\\?\\,\\'\\/\\\\\\+&%\\$#\\=~])*$",
TEL:"^1\\d{10}$",
ZIPCODE:"^\\d{6}$",
IDCARD:"^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])((\\d{4})|\\d{3}[A-Z])$",
IDCARD1:"^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$",
"prompt": {
radio: "请选择一个选项",
checkbox: "如果要继续，请选中此框",
"select": "请选择列表中的一项",
email: "请输入电子邮件地址",
url: "请输入网站地址",
tel: "请输入手机号码",
number: "请输入数值",
date: "请输入日期",
pattern: "内容格式不符合要求",
empty: "请填写此字段",
multiple: "多条数据使用逗号分隔",
idcard:"请输入身份证号",
idcard1:"请输入身份证号"
}
};