美文网首页Worktile Tech
Angular.js验证扩展组件 w5c-validator

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

作者: Worktile | 来源:发表于2015-03-24 17:06 被阅读3399次

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很多元素,但是对于一般项目来说使用没有什么问题,等有时间的时候重构下。

相关文章

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

    Angular.js的表单验证功能其实已经很完善了,具体的用法我就不一一介绍了,具体的使用方法参见官网https:...

  • django知识点七

    Django扩展 一、验证码 1、简介 在常规的Form表单使用中,验证码是常用的组件,用于更好的保障请求的合法性...

  • angular.js-component和directive

    angular.js组件化:为了达到ui的复用,将页面分成几部分。可以通过组件化来实现。

  • Angular基础(上)

    AngularJs 是一种MVVM(数据视图双向绑定)框架,angular.js扩展了HTML的功能,减轻了程序员...

  • Spring Boot 菜鸟教程 8 EasyUI edatag

    edatagrid扩展组件 edatagrid组件是datagrid的扩展组件,增加了统一处理CRUD的功能,可以...

  • Vue 后台管理项目4-登录页表单验证

    登录页表单验证 1.登录页表单验证 Ⅰ.在饿了吗Form表单组件下,找到表单验证示例 Form 组件提供了表单验证...

  • gitlab_readme

    图形验证码组件 安全键盘组件

  • Angular JS (Angular.JS)

    Angular JS (Angular.JS)是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支...

  • Hyperplonk

    零知识证明是区块链隐私和可扩展性的关键构建组件。 Zk-SARNKs 具备两个关键特性: (1)除了验证主明是有效...

  • 框架扩展

    Mixins是对父组件的扩充,Extend扩展组件的构造器 对Vue原型直接进行扩展

网友评论

  • _花:你好,我再他的官方例子里面先点击url,然后再点击select下拉框,结果option前面有一片黑色区域

本文标题:Angular.js验证扩展组件 w5c-validator

本文链接:https://www.haomeiwen.com/subject/ijugxttx.html