Vaidate 插件

  在前端开发中, 我们会遇到大表单的验证和组合成JSON, 这是一项巨大的任务, 如果都通过 手动编写低级代码来实现 50+ input类型的验证和复杂JSON的组装, 这无疑是异常难以维护和极其枯燥的工作。

有幸, 在前端开发中,我也遇到这个问题,翻看网上自动验证的插件,比较有名气的是jquery.validate.js 这个插件, 但是 粗粗的一看 好像没有 自动组装成JSON的功能以及blur,fource 等事件监听检验的功能,所以就开发了一个 比较简单的 validate插件,依赖于Jquery.

  实现了 基于 HTML 元素配置验证的方式,可以轻松的完成大表单的 事件验证(blur等),提交验证,以及JSON组装, 并且支持扩展,如编写自定义的组装方式,预定义了比较常用的valid,如 电话,非空,邮箱,身份证,等等, 以及一个结果组装方式(通过id:value构造JSON对象)。

  如下 是运行截图:

JS代码

  

HTML:

运行截图:

  

已经支持的验证函数:

  

插件中已经包含一些基本的验证函数:
@Notnull -- 非空
@Mobile --- 手机号码
@Telphone -- 电话号码
@Email --- 邮箱
@IdCard --- 身份证
@Chinese --- 中文输入
@Integer --- 整数
@+Integer --- 正整数
@-Integer --- 负整数
@Number -- 数字输入
@Word --- 单词输入[A-Za-z-0-9_]

包含一个默认的结果组装:
@Default -- id:value的格式封装.

项目地址:

https://github.com/darkgem/validate

多多指教。

validate大表单验证的更多相关文章

  1. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  2. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  3. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  4. 基于Bootstrap+jQuery.validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  5. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  6. vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  7. 使用validate进行表单验证时土方法(appendTo)改变error显示的位置

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  8. jquery.validate.js 表单验证简单用法

    引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...

  9. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

随机推荐

  1. 以太网PHY 芯片之 MII/MDIO接口详解

    本文主要分析MII/RMII/SMII,以及GMII/RGMII/SGMII接口的信号定义,及相关知识,同时本文也对RJ-45接口进行了总结,分析了在10/100模式下和1000M模式下的设计方法. ...

  2. SQL Server使用规范

    原文:SQL Server使用规范 常见的字段类型选择 1.字符类型建议采用varchar/nvarchar数据类型 2.金额货币建议采用money数据类型 3.科学计数建议采用numeric数据类型 ...

  3. JMeter 怎么保存登录状态

    在Recording Controller中添加一个HTTP Cookie Manager Recording Controller右键-->add-->config element--& ...

  4. SSIS从理论到实战,再到应用(6)----SSIS的自带日志功能

    原文:SSIS从理论到实战,再到应用(6)----SSIS的自带日志功能 上期回顾: SSIS从理论到实战,再到应用(5)----流程控制之Foreach循环 博主最近新负责了一个ssis大项目的架构 ...

  5. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  6. 仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表中为标识列指定显式值问题

    今天在处理数据库过程中碰到这样的问题在插入一条数据到表中 系统报这样的错误 仅当使用了列的列表,并且 IDENTITY_INSERT 为 ON 时,才能在表中为标识列指定显式值问题 表有一列是自增长的 ...

  7. crawler_UE使用技巧

    UE使用技巧 Tip 1: 如何去掉所编辑文本中包含特定字符串的行? 这则技巧是在UltraEdit的帮助文件里提到.CTRL+R 调出来替换(Replace)窗口,选中"使用正则表达式&q ...

  8. oracle_连接数_查看

    查看oracle数据库的连接数以及用户   .查询oracle的连接数 select count(*) from v$session; .查询oracle的并发连接数 select count(*) ...

  9. spark(1.1) mllib 源代码分析

    在spark mllib 1.1加入版本stat包,其中包括一些统计数据有关的功能.本文分析中卡方检验和实施的主要原则: 一个.根本 在stat包实现Pierxunka方检验,它包括以下类别 (1)适 ...

  10. Ruby入门--Linux/Windows下的安装、代码开发及Rails实战

    Ruby入门--Linux/Windows下的安装.代码开发及Rails实战 http://www.linuxidc.com/Linux/2014-04/100242.htm Ubuntu 13.04 ...