AngularJS 的表单验证规则
angular.js 的表单验证规则有 required(必填项),type="number"(必须为数字),type="email"(必须为邮箱地址),ng-max(最大值),ng-min(最小值),ng-max-length(最大长度),ng-min-length(最小长度),ng-pattern(正则验证)等等,而且angular写自定的验证规则也很简单。
具体的验证细节参考官方文档:http://docs.angularjs.org/guide/forms
AngularJS 默认的验证是实时的,如果输入框输入值验证通过会在input上加入class ng-valid,如果验证不通过会自动添加 class ng-invalid,输入框输入了值之后自动加上了 class ng-dirty,这样系统可以很简单的通过修改 ng-invalid ng-valid ng-dirty 三个样式达到验证提示的目的。但是如果验证失败需要提示一段文字,那么只有通过编写模板来达到。
Angular.js 验证的缺点
- 提示信息是实时显示的,有时候我们更想要通过表单提交触发验证
- 写验证提示信息需要写大量模板:
<div> Size (integer 0 - 10): <input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}<br /> <span ng-show="form.size.$error.integer">This is not valid integer!</span> <span ng-show="form.size.$error.min || form.size.$error.max"> The value must be in range 0 to 10!</span> </div>
w5cValidator 扩展插件的出现
Github上的源码地址为:https://github.com/why520crazy/w5c-validator-angular
目前版本v1.0.0
使用步骤:
-
在项目中引用 w5cValidator.js
-
在表单form上添加一个指令 w5c-form-validate 和 w5c-submit 如下所示:
<form class="form-horizontal cw-form demo-form" role="form" w5c-submit="js_save_entity(form_validate)" w5c-form-validate="" novalidate name="form_validate"> <div class="form-group"> <label class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" name="email" ng-model="entity.email" required="" class="form-control" placeholder="输入邮箱"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input required="" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/" ng-model="entity.name" class="form-control" name="user_name" placeholder="输入用户名"> </div> </div> ... </form>
w5c-submit 函数是表单验证成功后执行的事件,验证失败不会执行
-
没了,使用就这么简单
w5cValidator 使用注意事项:
-
w5cValidator 默认的错误提示使用了bootstrap的样式和布局,使用到你的项目中需要修改默认的 show_error, remove_error 方法,可以是tip提示,可以是统一在某个地方显示等等
-
w5cValidator 可以设置光标移走input时是否显示错误提示,默认false
-
w5cValidator 自带了默认的提示信息,同时支持自定义验证规则提示信息
-
angular.js的所有验证信息都是保存在form表单中的,w5cValidator也是监控表单元素的属性来实现的,使用必须要设置form以及每个元素的name属性,否则错误信息就找不到对应的元素
-
看下以下的代码你就能明白一切了:
w5cValidator.init({ //blur_trig : false, //show_error : function (elem, error_messages) { // //}, //remove_error: function (elem) { // //} }); w5cValidator.set_rules({ user_name: { required: "输入的用户名不能为空", pattern : "用户名必须输入字母、数字、下划线,以字母开头" } });
当然目前的 w5cValidator 还比较原始,NgNice的验证提示就是使用了w5cValidator
未来规划中的 w5cValidator 2.0
- 现在只能设置全局的显示类型,将来要支持单个表单的配置项,整个项目偶尔会有提示信息不同的情况
- 代码重构,以AngularJS的方式编写扩展
- 添加一些 AngularJS没有的验证类型 如 repeat ,uniquecheck 等
如果大家有什么更好的建议 可以共同探讨!!!
相关推荐
主要介绍了AngularJS验证信息框架的封装插件用法,分析了AngularJS表单验证规则并实例说明了w5cValidator扩展插件的相关使用技巧,需要的朋友可以参考下
基于angularjs 自己封装的的验证插件 验证效果很好,而且支持提交时验证表单输入是否合法
C++ Hook DirectX 11的内部Imgui绘制的框架封装C++ Hook DirectX 11的内部Imgui绘制的框架封装C++ Hook DirectX 11的内部Imgui绘制的框架封装C++ Hook DirectX 11的内部Imgui绘制的框架封装C++ Hook DirectX 11的...
一个良好的http请求框架的封装,支持接口的链式请求,能够更加灵便的使用
半导体元器件引线框架封装之分层研究.pdf
分享一下 使用EF时,对增删改查基本操作的封装代码 ef重构基类;抛砖引玉,仅供参考; ef增删改差扩展方法!
NULL 博文链接:https://bijian1013.iteye.com/blog/2110609
一款通用的MVP框架封装,包括在Activity和Fragment中的使用,代码结构清晰,使用方便。
NULL 博文链接:https://bijian1013.iteye.com/blog/2110611
很好用的前台验证控制输入的框架 个人写的 不好请见谅!
Android开发Kotlin代码下的MVP模式+Retrofit2.0+RxJava1.0+Dagger2框架封装,非常适合小白。
用了不是很长的时间跟了一个移动APP项目,用的是ionic + AngularJS + cordova框架,其间遇到过挺多问题,其中一个就是对Ajax的封装问题。 其实针对封装问题一直以来就没停止过谈论,不同的项目也有不同的需求,举...
SSH 为 struts+spring+hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。
封装的MVP框架,还在一直改进中,当然有看到不当之处也欢迎能够指出问题,如果你没有资源分,可去github下载地址:https://github.com/gitwangyang/MVP
如果仅仅实现这个功能需要的java代码绝对在10行以下,但是本片主要是讲一下简易框架的封装。 封装目的: 1、在同一个项目中,我们要执行网络操作可定不想要每次都编写一遍HTTP请求的代码。通常情况我们都会将这些...
Cocos Creator 游戏框架功能封装与设计,已实现模块化管理,各个功能支持随意调用,大厅与小游戏的相互关联,是学习实现的好demo
MVP模式的框架,封装了轮播图banner的使用,公告栏的封装,许多潮流的三方库的引用
表单验证 正则 函数封装 不会用的和本人联系
对若依的框架进行二次封装,后台接口可单独抽离,打包后也可以再次修改,不影响程序的正常运行、相对干净的框架,没有乱七八糟的东西,支持售后~~