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 ...
随机推荐
- java缓存技术(转)
最近在做java缓存,了解了一下.以下仅是对map对方式讨论.没有对点阵图阵讨论.作缓存要做以下2点: 1:清理及更新缓存时机的处理: . 虚拟机内存不足,清理缓存 .. 缓存时间超时,或访问 ...
- 怎样批量把excel中已显示的科学计数法取消
作者:iamlaosong 把一文本文档拷贝到EXCEL中时,当中一列数字所有变成科学计数法,这些数事实上是条码号,不需进行运算,怎样能够取消科学计算法,将数字显示成原来的样子呢?一般方法例如以下: ...
- HDU ACM 1007 Quoit Design 分而治之的方法,最近点
意甲冠军:给n坐标点.半一对点之间的距离所需的距离最近. 分析:分而治之的方法,最近点. #include<iostream> #include<algorithm> #inc ...
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)-实现用户异步登录和T4模板
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)-实现用户异步登录和T4模板 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 ...
- ssh 综合
文件夹结构: 搭建项目: 1.创建web项目 2.创建各种包. com.atguigu.surveypark.dao.impl com.atguigu.surveypark.model com.atg ...
- Swift得知——使用和分类功能(四)
Swift得知--使用和分类功能(四) 总结Swift该功能使用的总可分为七类 1 ---- 没有返回值,没有參数的函数 2 ---- 有參数和返回值的函数 3 ---- 使用元祖来返回多个值 4 - ...
- Linux查看非root流程执行
Linux查看非root流程执行 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps -U root -u root -N PID TTY TIME CMD ...
- java_eclipse_svn 与服务器同步时 ,忽略某类型文件和文件夹
1. 在项目开发中使用svn ,带来很大的方便,有时我们会把整个项目上传的svn服务器上 这样就包含了 编译过的class文件 以及 一些 .svn,.log文件,有些文件时本地complie 的 ...
- NEFUOJ 500 二分法+最大流量
http://acm.nefu.edu.cn/JudgeOnline/problemshow.php?problem_id=500 description 在这个信息化的时代.网购成为了最流行的购物方 ...
- 电商指尖---(9).net发展Solr中间Facet特征
上一节中我们演示了在SolrAdmin中使用Facet功能来进行分组统计.这一节我们看看如何使用.NET开发Solr中的Facet功能.在讲Facet功能的同一时候, 我们看下.Net中如何使用Sol ...