validate大表单验证
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大表单验证的更多相关文章
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象合并到总的对象,再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- 使用validate进行表单验证时土方法(appendTo)改变error显示的位置
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
随机推荐
- ArcGIS for Silverlight 地图卷帘
原文:ArcGIS for Silverlight 地图卷帘 ArcGIS 地图卷帘 for Silverlight 地图卷帘,其实就是遮罩的效果,在Silverlight里实现这样的效果,对于熟悉S ...
- Dubbo与Zookeeper、SpringMVC整合和利用(负载均衡、容错)
互联网发展,扩大了网站应用程序的大小.传统的垂直应用架构已经无法应付.分布式服务架构和流量计算架构势在必行,Dubbo是一个分布式服务框架.在这样的情况下诞生的.如今核心业务抽取出来.作为独立的服务, ...
- SPOJ 375 树链剖分
SPOJ太慢了,SPOJ太慢了, 题意:给定n(n<=10000)个节点的树,每条边有边权,有两种操作:1.修改某条变的边权:2.查询u,v之间路径上的最大边权. 分析:树链剖分入门题,看这里: ...
- C语言的这些事情有关内存
C语言的程序内存布局,从高到低依次为:栈区.堆区.未初始化数据区.初始化数据区.代码区. 一.栈区 由编译器自己主动管理,无需程序猿手工控制.存放函数的參数值.局部变量的值等.栈区内容从高地址到低地址 ...
- Sql Server脚本使用TFS版本控制
原文:Sql Server脚本使用TFS版本控制 1.安装TFS插件 Microsoft Visual Studio Team Foundation Server 2010 MSSCCI Provid ...
- win8 64位使用plsql developer连接oracle数据库问题
问题:win8的64使用位系统plsql developer本地连接oracle莫名其妙的问题发生在数据库时.错误消息框,甚至可能是空的. 原因:它表示,互联网,的原因,预计在64位系统安装在64位O ...
- Debug和Release的不同
1. 变量. 大家都知道,debug跟release在初始化变量时所做的操作是不同的,debug是将每个字节位都赋成0xcc(注1),而release的赋值近似于随机(我想是直接从内存中分配的,没有 ...
- AspNet.WebAPI.OData.ODataPQ
AspNet.WebAPI.OData.ODataPQ实现WebAPI的分页查询服务 AspNet.WebAPI.OData.ODataPQ实现WebAPI的分页查询服务-(个人拙笔) AspNet. ...
- C#操作Xml:XmlSerializer 对象的Xml序列化和反序列化
这篇随笔对应的.Net命名空间是System.Xml.Serialization:文中的示例代码需要引用这个命名空间. 为什么要做序列化和反序列化? .Net程序执行时,对象都驻留在内存中:内存中的对 ...
- 有意思的cmd命令
1. Msconfig命令显示系统配置窗体,能够了解一些服务.启动相关的信息. 2.Gpedit.msc 命令显示本地组策略编辑器,能够设置用户登录时执行的程序. 3. Regedit 这个应该非常多 ...