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 ...
随机推荐
- C#操作IIS完整解析
原文:C#操作IIS完整解析 最近在为公司实施做了一个工具,Silverlight部署早已是轻车熟路, 但对于非技术人员来说却很是头疼的一件事,当到现场实施碰到客户情况也各不相同, 急需一个类似系统备 ...
- (大数据工程师学习路径)第一步 Linux 基础入门----数据流重定向
介绍 开始对重定向这个概念感到些许陌生,但通过前面的课程中多次见过>或>>操作了,并知道他们分别是将标准输出导向一个文件或追加到一个文件中.这其实就是重定向,将原本输出到标准输出的数 ...
- 笔试题&面试题:设计一个复杂度为n的算法找到单向链表倒数第m个元素
设计一个复杂度为n的算法找到单向链表倒数第m个元素.最后一个元素假定是倒数第0个. 提示:双指针查找 相对于双向链表来说,单向链表仅仅能从头到尾依次訪问链表的各个节点,所以假设要找链表的倒数第m个元素 ...
- JavaEE(5) - JMS实现企业Pub-Sub消息处理
1. 在Weblogic服务器上配置Pub-Sub消息目的 向已有的JMS模块中添加消息主题: Services-->Messaging-->JMS Modules--><Mo ...
- OWIN轻量型框架介绍
OWIN轻量型框架介绍 阅读目录 引言 框架的特色 如何启动 各项功能 静态路由的3种写法 伪静态路由的支持 处理Form表单提交的文件 流式处理Post请求的数据 多种请求类型自动识别 响应处理 请 ...
- Linux makefile 课程 非常具体的,和理解
最近的一项研究Linux根据C计划,我买了一个电话<Linux环境C编程指南>阅读makefile这使他看起来困惑,我可能无法理解. 于是google到了下面这篇文章. 通俗易懂. 然后把 ...
- SQL字符串转换为数组
/*一.按指定符号分割字符串,返回分割后的元素个数,方法很简单,就是看字符串中存在多少个分隔符号,然后再加一,就是要求的结果. -----rtrim(@str)去掉 @str右边的字符 ltrim(@ ...
- 插件式Web框架
转载构建高性能插件式Web框架 基于MVC插件模式构建支持数据库集群.数据实时同步.数据发布与订阅的Web框架系统.如下图: 1.基于插件式开发 采用插件模式开发的优点是使得系统框架和业务模式有效地进 ...
- Android开发手册 (Android的手工教程MtAndroid开发手册)
放出版许可协议 1.0 或者更新版本号. 未经版权全部者明白授权,禁止发行本文档及其被实质上改动的版本号. 未经版权全部者事先授权.禁止将此作品及其衍生作品以标准(纸质)书籍形式发行. 假设有兴趣再 ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...