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 ...
随机推荐
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- Codeforces 514 D R2D2 and Droid Army(RMQ+二分法)
An army of n droids is lined up in one row. Each droid is described by m integers a1, a2, ..., am, w ...
- C++ Web Programming
一般的网关接口或者CGI,就是一个标准的集合.它定义信息怎样再问吧server和一般脚本间的交换. CGI的说明书是由NCSA维护,NCSA定义CGI的范畴:一般的网关接口或者CGI是外部网关程序的一 ...
- 为什么数据线easy糟糕
一个好的设计可以帮助解决问题似乎无关紧要豪. 两天前M3数据线被破坏.在弯附近的电话插口可以充电.一松就充不了电了. 今天突然想到每次充电的时候用手机发信息.玩游戏都特别不方便,才想到为什么数据线ea ...
- A hard puzzle 1097
Problem Description lcy gives a hard puzzle to feng5166,lwg,JGShining and Ignatius: gave a and b,how ...
- C# Windows服务的创建、安装、调试
一.查看已有的Windows服务 选择菜单"开始"-〉"控制面板"-〉"管理工具"-〉"服务"来查看现有系统中的服务 二 ...
- php+flash头像上传组件
有会员系统的站点一般都会有一个头像上传组件,一般做的最简单的是 这样的方式长处是代码写的简单,仅仅要推断图片大小和类型,然后更新数据库.可是用户体验不高.并且站点其它页面假设要使用较小的20X20或1 ...
- HDU 1042 N! 參考代码
HDU 1042 N! 题意:给定整数N(0 ≤ N ≤ 10000), 求 N! (题目链接) #include <iostream> using namespace std; //每一 ...
- C# Email邮件发送,功能是密码找回或者重置功能。
原文:C# Email邮件发送,功能是密码找回或者重置功能. 最近根据公司需求,写个邮件发送. 这里面的传入的地址信息的参数都是经过加密的. 主要是保证用户信息的安全. 帮助类 using ...
- ZOJ 3802 Easy 2048 Again 像缩进DP
链接:problemId=5334">http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5334 题意:一个长度为5 ...