从现在开始,使用简单优雅的validata.js
表单验证,是后台开发中万年不变的话题,在经历许多实战之后发现
使用优雅便捷的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的更多相关文章
- 代码首要的目标应该是“解决问题”(包括“没有 bug”),其次的目标才是“简单优雅”。
什么是现实理想主义者 曾经有人看了我的文章,以为我是一个“理想主义者”,来找我聊天.他说:“你知道吗,我跟你一样喜欢简单优雅的代码.上次我在某公司工作,看到他们的代码乱得不成样子,二话没说给他们重写了 ...
- 优雅的vue.js
优雅的vue.js代码 https://www.cnblogs.com/zhengrunlin/p/9164951.html watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. ...
- PNotify – 简单易用的 JS 通知,消息提示插件
PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...
- 简单粗暴地理解js原型链–js面向对象编程
简单粗暴地理解js原型链–js面向对象编程 作者:茄果 链接:http://www.cnblogs.com/qieguo/archive/2016/05/03/5451626.html 原型链理解起来 ...
- 五、springboot 简单优雅是实现邮件服务
前言 spring boot 的项目放下小半个月没有更新了,终于闲下来可以开心的接着写啦. 之前我们配置好mybatis 多数据源的,接下来我们需要做一个邮件服务.比如你注册的时候,需要输入验证码来校 ...
- 六、springboot 简单优雅是实现短信服务
前言 上一篇讲了 springboot 集成邮件服务,接下来让我们一起学习下springboot项目中怎么使用短信服务吧. 项目中的短信服务基本上上都会用到,简单的注册验证码,消息通知等等都会用到.所 ...
- 七、springBoot 简单优雅是实现文件上传和下载
前言 好久没有更新spring Boot 这个项目了.最近看了一下docker 的知识,后期打算将spring boot 和docker 结合起来.刚好最近有一个上传文件的工作呢,刚好就想起这个脚手架 ...
- 八、springboot 简单优雅的通过docker-compose 构建
前言 这个项目有一段时间没有更新了,不过我可没有偷懒哟,是偷偷准备了一个大招,现在是时候展示啦哈哈. 我们今天要做的,就是将我们的项目通过docker-compose 构建成镜像运行.为什么要这样做呢 ...
- 十、Spring boot 简单优雅的整合 Swagger2
前言 swagger2 是什么,我这里就不说了,就是一个简单的接口文档,方便前后端联调. 其实之前没有想要到要使用swagger 的.因为我之前用的是YAPI ,不过这个是一个单独的工具.并且是开源的 ...
随机推荐
- CentOS 7下安装Mysql 5.7
参见http://www.07net01.com/2016/03/1355735.html 过程中需要安装perl CentOS 7 采用了 firewalld 防火墙 service firewal ...
- Spring bean的作用域和生命周期
bean的作用域 1.singleton,prototype, web环境下:request,session,gloab session 2.通过scope="" 来进行配置 3. ...
- win7 64的系统安装。net4.0总是提示安装未成功
主要原因是Windows update的临时文件损坏,建议重命名该文件夹. 1. 开始——运行——cmd——键入net stop WuAuServ回车(停止windows update服务): 2. ...
- 深入研究C语言 第三篇
本篇研究TC2.0下其他几个工具.同时看看TC由源代码到exe程序的过程. 1. 用TCC将下面的程序编为.obj文件 我们知道,TCC在默认的编译连接一个C语言的源程序a.c的时候分为以下两步: ( ...
- shell学习--grep2
grep相关的练习,解释下面grep表达式的含义: grep '\<Tom\>' file 打印file中包含单词 Tom的行 grep 'Tome Savage' file 打印file ...
- Windows下 maven3.3.1的安装步骤+maven配置本地仓库
简单讲下maven的安装步骤: 1.在安装maven之前,先确保已经安装JDK1.6及以上版本,并且配置好环境变量. 2.下载maven3,最新版本是Maven3.3.1 ,下载地址:http://m ...
- 再牛逼的梦想,也抵不住SB似的坚持
说起梦想,哪都是好几年前的事了.自从毕业之后,梦想不知道去哪了.可能一次次的失败,找不到了梦想的方向了吧! 自从毕业去了深圳,为了能够在这个城市安稳下来,白天正常上班晚上在街上摆地摊给人下载音乐和电影 ...
- 拒绝try.catch泛滥,学习委托有感
读了一位博友关于使用委托避免重复的try.catch的随笔(原文地址:http://www.cnblogs.com/foolishfox/archive/2010/07/30/1788416.html ...
- 用JDBC做账号注册登陆
一.先用JDBC做账号登陆 方法一:用createStatement方法做账号登陆 测试结果:当输入正确账号密码时:当输入错误账号密码时: 当用注入攻击输入账号密码时: 注入攻击的原理是 输入任意值' ...
- C语言通过timeval结构设置周期
在C语言中,我们经常需要设置一个时间周期.在这里,我们通过Timeval结构实现时间周期的设置.首先,我们介绍timeval,其定义如下(转载http://www.cnblogs.com/wainiw ...