技术博客

Angular.js验证扩展组件 w5c-validator


Angular.js的表单验证功能其实已经很完善了,具体的用法我就不一一介绍了,具体的使用方法参见官网 https://angularjs.org (官网访问不了可以访问:http://www.ngnice.com/docs/guide/forms ,具体原因:此处省略N字)。
Worktile一开始就使用ng的表单验证,自带了很多验证规则(比如:唯一性验证 require、邮箱地址验证 email、正则验证 pattern、URL验证、数字验证、最大长度、最小长度),这些基本上满足了大部分表单验证规则了,唯一缺少2个常用的:远程验证和重复验证。

使用一段时间后发现:

验证失败后提示信息需要写很多模板,而且这些模板的提示大部分都是不可重用的。
我们是一群有洁癖的程序员,所有我们决定在ng表单验证的基础上封装一个信息提示功能的组件,自从使用这个组件后,表单上基本上看不到错误提示的模板。

这个组件我之前在 http://www.ngnice.com/posts/236860ed32d3e8 文章中也介绍过,今天在Worktile自己的技术博客上再次介绍下 angular-w5c-validator 。

源码都在Github上:https://github.com/why520crazy/angular-w5c-validator
使用示例:http://why520crazy.github.io/angular-w5c-validator

这个组件的大致实现原理就是监控表单上所有元素的输入值,当验证不通过的时候,根据默认或者配置的显示错误方式提示错误信息。当然这种实现方式也不是特别好,需要watch很多元素,但是对于一般项目来说使用没有什么问题,等有时间的时候重构下。

智齿客服