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. WSHPSRS-匹克选择列表生成器-SRS(R12.2.3)

     匹克选择列表生成器-SRS(R12.2.3) --US Program:Pick Selection List Generation - SRS Short Name:WSHPSRS Appli ...

  2. CODE - TSQL convert Query to JSON

    原文 ODE - TSQL convert Query to JSON TSQL - Query to JSON It is my philosophy that good development s ...

  3. C#如何设置session过期时间

    1.操作系统  步骤:开始——〉管理工具——〉Internet信息服务(IIS)管理器——〉网站——〉默认网站——〉  右键“属性”——〉主目录——〉配置——〉选项——〉启用会话状态——〉会话超时(在 ...

  4. MySql创建一个存储过程

    MySQL 存储过程是从 MySQL 5.0 新功能.存储过程的长处有一箩筐.只是最基本的还是运行效率和SQL 代码封装. 特别是 SQL 代码封装功能,假设没有存储过程,在外部程序訪问数据库时(比如 ...

  5. Unobtrusive JavaScript 是什么?

    Unobtrusive JavaScript 是什么? <!--以下是常规Javascript下写出来的Ajax--><div id="test">< ...

  6. node.js的npm安装

    我不打算引进node.js的npm安装,但发现node.js通过管理一些包npm实现,或给一个简短的npm. 1.npm什么        npm是一个node包管理和分发工具,已经成为了非官方的公布 ...

  7. Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds解

    产生了一个解决这个问题的方法是在项目部署到tomcat比长45第二,当项目是比较大的,框架复杂的问题经常发生. 解决方法非常easy,找到以下这个路径中 workspace\.metadata\.pl ...

  8. Java经典23创意模式设计模式(两)

    本文介绍5其余两种创意模式:模型构建器(Builder).原型模型(PROTOTYPE). 一.建造者模式(别名:生成者模式) 将复杂对象的构建和它的表示分离,使得相同的构建过程能够创建不同的表示. ...

  9. ReactJS.NET

    初探ReactJS.NET 开发 ReactJS通常也被称为"React",是一个刚刚在这场游戏中登场的新手.它由Facebook创建,并在2013年首次发布.Facebook认为 ...

  10. POJ 2187: Beauty Contest(旋转卡)

    id=2187">Beauty Contest Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 27218   ...