jQuery html5Validate基于HTML5表单验证插件

最新推荐文章于 2024-03-10 13:43:26 发布

weixin_34378922

最新推荐文章于 2024-03-10 13:43:26 发布

阅读量171

点赞数

文章标签： javascript 前端 python ViewUI

原文链接：https://my.oschina.net/Seaside20151225/blog/666547

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、html5Validate的优势？

面向未来的表单验证

1. 验证驱动
  验证信息HTML驱动，例如HTML5中required, pattern, multiple等
2. 验证形式
  非即时响应，submit验证，如Chrome浏览器的处理；或者弱即时响应，如FireFox浏览器仅仅红色外发光。
3. 验证交互
  浮动形式，尖角指示。

换言之，所谓面向未来的表单验证，是遵循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框架

注：如果项目组使用artSeaConfig.js统一加载了该js，在html界面无需重复再引用。

2）、引入html5Validate插件：示意

注：如果项目组使用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">

下拉菜单必填：

复选框：除了某一个都必填

<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长度控制：

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:"请输入身份证号"
}
};