表单验证,是后台开发中万年不变的话题,在经历许多实战之后发现

使用优雅便捷的validate.js实现验证实在是一件非常愉悦的事情

    <form data-validate>
    Enter:
    <input type="password" data-rule="密码:required;number[请输入一个整数];equals(target)"/>
    <input type="password" id="target"/>
    </form>

  在实例用,form元素中加入了data-validate标记,validate.js会为form标记内的验证控件进行自动验证
  验证控件使用data-rule标记,data-rule的语法格式是:

    提示名称: 规则(规则参数) [自定义提示];

  其中 ‘提示名称’与‘自定义提示’都是可选项,某些规则需要传入一个参数,比如equals规则需要传入比较控件的id

  自定义提示中可以使用{name}与{arg}变量,这在自定义规则中很有用

  validate.js会在验证控件之后加入一个标签<div class="error_msg"></div>该标签的模版在$.validate.errorTemplate中

  添加标签的操作由validateHandler实现,validate.js内置了一个简单的验证后操作处理函数

  用户可以使用window.validateHandler = function(msg, scrollTo)来自己的验证后处理函数(添加提示标签,滚动到错误控件处)

  validate.js内置了一些规则,定义在 $.validate.rules下,其结构如下:

     $.validate.rules = {
    required: { rule: /./, message: '不能为空' },
    equals: {
    action: function (el, rule, val, target) {
     return val !== $('#'+target).val();
    }, message: '两次输入的值不一致'
    }
    }

  用户可以往$.validate.rules添加自定义规则,规则中包含了 rule,action,message
  rule表示为一个正则规则,action表示一个函数验证规则,两者是不能同时拥有
  message可以是一个“string”也可以是一个函数,如果是“string”类型,那么可以使用{name},{arg}来替换成控件名称与参数

  如果是函数,其格式是 message : function (name,arg){ return '' }

  使用js获取控件验证状态:

    $('[data-rule]').isValidate() -> bool

  获取验证消息:

    $('form').validate(justTest,scrollTo) ->
     param: justTest bool 只是检查,不修改Dom
    param: scrollTo bool 滚动到错误元素
     return { isValidate : bool,
     messages:[{
     element:jQueryElement,
     message:string
     }]
    }

从现在开始,使用简单优雅的validata.js的更多相关文章

  1. 代码首要的目标应该是“解决问题”(包括“没有 bug”),其次的目标才是“简单优雅”。

    什么是现实理想主义者 曾经有人看了我的文章,以为我是一个“理想主义者”,来找我聊天.他说:“你知道吗,我跟你一样喜欢简单优雅的代码.上次我在某公司工作,看到他们的代码乱得不成样子,二话没说给他们重写了 ...

  2. 优雅的vue.js

    优雅的vue.js代码 https://www.cnblogs.com/zhengrunlin/p/9164951.html watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. ...

  3. PNotify – 简单易用的 JS 通知,消息提示插件

    PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

  4. 简单粗暴地理解js原型链–js面向对象编程

    简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...

  5. 五、springboot 简单优雅是实现邮件服务

    前言 spring boot 的项目放下小半个月没有更新了,终于闲下来可以开心的接着写啦. 之前我们配置好mybatis 多数据源的,接下来我们需要做一个邮件服务.比如你注册的时候,需要输入验证码来校 ...

  6. 六、springboot 简单优雅是实现短信服务

    前言 上一篇讲了 springboot 集成邮件服务,接下来让我们一起学习下springboot项目中怎么使用短信服务吧. 项目中的短信服务基本上上都会用到,简单的注册验证码,消息通知等等都会用到.所 ...

  7. 七、springBoot 简单优雅是实现文件上传和下载

    前言 好久没有更新spring Boot 这个项目了.最近看了一下docker 的知识,后期打算将spring boot 和docker 结合起来.刚好最近有一个上传文件的工作呢,刚好就想起这个脚手架 ...

  8. 八、springboot 简单优雅的通过docker-compose 构建

    前言 这个项目有一段时间没有更新了,不过我可没有偷懒哟,是偷偷准备了一个大招,现在是时候展示啦哈哈. 我们今天要做的,就是将我们的项目通过docker-compose 构建成镜像运行.为什么要这样做呢 ...

  9. 十、Spring boot 简单优雅的整合 Swagger2

    前言 swagger2 是什么,我这里就不说了,就是一个简单的接口文档,方便前后端联调. 其实之前没有想要到要使用swagger 的.因为我之前用的是YAPI ,不过这个是一个单独的工具.并且是开源的 ...

随机推荐

  1. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  2. 不容错过!2016年度优秀UI/UX设计文章

    本文整理了一些2016年度最受欢迎的文章,例如有关UI / UX设计的理论知识,书籍和工具,如何做出更好的设计的方法和建议,以及新的设计趋势. 1. 2017年用户体验设计趋势 我们期待着2017年用 ...

  3. hbuilder中如何使用egit上传项目

    刚开始使用时,我也是遵照网上的教程来的,其实就那一篇教程,到处被转载,怎么搜都是那一个,实际操作发现有点小不同,所以实际截图给大家一个参考. 1.首先肯定是进入hbuilder下载egit插件啦.(工 ...

  4. Session失效之 IE iframe cookie问题(p3p)

    项目中,在做门户系统时,使用了iframe嵌套展示各个子系统的页面,其中有个页面在ie8下,始终无法正常登陆. 后来项目经理分析,应该是iframe跨域导致,赶忙查看了连接地址,还真是一个跨域的页面. ...

  5. nginx新增绑定域名

    例如我要使binzz.com也绑定到原有的www.binzz.com上,在server上添加下面代码: server {        listen       80;        server_n ...

  6. delegate notification kvo三者比较

    IOS 如何选择delegate.notification.KVO? 前面分别讲了delegate.notification和KVO的实现原理,以及实际使用步骤,我们心中不禁有个疑问,他们的功能比较类 ...

  7. jQuery .css color 重写 :hover样式没了

    $("#quickSqlDiv a").css({"color":"red"}); $("#course a").css ...

  8. laravel中如何写验证码文件,并防止中文乱码.

    本例为生成中文验证码,专为laravel而生. //控制器: public function getVcode(Request $request){ $width=845; $height=125; ...

  9. Win7 64位 VS2013环境编译Squirrel 3.0.7

    Squirrel是一个类似Lua,但是更面向对象的脚本语言. 国内这个介绍很少,环境配置更是没有任何文章提到,花了点时间搞定了,备忘记录下过程. 首先是下载,写本文时Squirrel最新版本为3.0. ...

  10. WinForm程序关闭窗体后杀死进程

    调用this.Close();后监听Browser_FormClosed加作处理 this.FormClosed += new System.Windows.Forms.FormClosedEvent ...