从现在开始,使用简单优雅的validata.js
2016-05-26 12:56
681 查看
表单验证,是后台开发中万年不变的话题,在经历许多实战之后发现
使用优雅便捷的validate.js实现验证实在是一件非常愉悦的事情
在实例用,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添加自定义规则,规则中包含了 rule,action,message
rule表示为一个正则规则,action表示一个函数验证规则,两者是不能同时拥有
message可以是一个“string”也可以是一个函数,如果是“string”类型,那么可以使用{name},{arg}来替换成控件名称与参数
如果是函数,其格式是 message : function (name,arg){ return '' }
使用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 }] }
相关文章推荐
- 无缝切换功能
- 新浪文字分享功能
- 原生JS实现Ajax
- 延迟菜单实现
- 微博发布框
- 使用原生JavaScript模拟getElementByClassName .
- jsonview插件高度可视化json数据
- JS通过URL向另一jsp页面传值时中文乱码问题
- 动态加载js、css 代码
- JavaScript中使用console调试程序的坑
- 算是帮华仔写的撸JSON文件,然后发到我的REST接口的PYTHON代码
- 基于Netty5.0高级案例二之WebSocket中关于使用ProtoBuf传输数据介绍js部分
- JS设计模式之单例模式
- JavaScript中0和""比较引发的问题
- js常用事件总结及案例-onFocus、onBlur
- javascript 中的console.log有什么作用啊?
- js三种消息框总结-警告框、确认框、提示框
- js压缩上传的图片,并转化为base64字符串传输
- js报错:Ajax 中onreadystatechange在ie7及以上浏览器兼容吗,为什么没有反应?求大神
- Javascript学习笔记part1(Table单元格相同数据自动合并)补充