Angular 表单验证类库 ngx-validator 1.0 正式发布
背景介绍
之前写了一篇 《如何优雅的使用 Angular 表单验证》,结尾处介绍了统一验证反馈的类库 ngx-validator ,由于这段时间一直在新模块做微前端以及相关业务组件库,工具等开发,一直拖到现在,目前正式版 1.0 终于可以发布了。
可能有些人没有阅读过那篇博客,我这里简单介绍下 ngx-validator 主要的功能。
- 统一验证规则和错误反馈策略,通过响应式(配置的方式)设置每个元素对应每个验证器的错误提示文案以及统一错误信息反馈,避免手动写重复的模版实现错误提示,让开发人员专心写业务即可;
- 扩展一些 Angular 本身没有提供验证器和模版驱动的验证指令,比如 ngxUniqueCheck 、 ngxMax 、 ngxMin ;
- 支持模版驱动和响应式驱动表单的验证。
从上次 0.0.1 版本到 1.0.0 正式发布新增了的功能有:
- 新增了 validateOn 支持 submit 和 blur 光标移走验证,之前只有点击按钮提交才会验证
- 对响应式表单支持的完善;
- 测试和 Demo 的完善;
- 重构了代码,添加了自动生成 changelog 和 husky 钩子做 commit message 规范检查和自动格式化(这些和库的功能无关,与开发者有关)
使用方式
如果你不想听我废话,可以直接看 示例 ,其中包括模版驱动和响应式驱动表单实现验证的全部代码。
安装
在你的项目中执行命令 npm install @why520crazy/ngx-validator --save 进行模块的安装
引入模块
在启动模块 AppModule 中直接引入 NgxValidatorModule ,当然引入的时候可以通过 NgxValidatorModule.forRoot 进行一些全局参数的配置,配置包含全局的验证错误信息,错误反馈方式,目前反馈方式支持 boostrap4 的表单错误样式和 noop(什么都不提示),当然你可以扩展自己的错误反馈策略。
import { NgxValidatorModule, ValidationFeedbackStrategyBuilder } from '@why520crazy/ngx-validator'; @NgModule({
imports: [
CommonModule,
NgxValidatorModule.forRoot({
validationFeedbackStrategy: ValidationFeedbackStrategyBuilder.bootstrap(),
validationMessages: {
username: {
required: 'Username is required.',
pattern: 'Incorrect username format.'
}
}
})
]
})
class AppModule {}
模版驱动表单验证
在 form 表单元素上添加 ngxFormValidator 指令,配置的参数和全局配置的参数类似,此处单独配置只会对当前 Form 有效。
由于 ngxFormValidator 采用的验证器,以及元素是否验证通过完全读取的是 Angular 表单提供的信息,所以模版驱动表单必须遵循 Angular 表单的一些规则:
- 表单元素必须设置一个 name,这个 name 会和 ngForm controls 中的对象对应;
- 表单元素必须设置 ngModel ,当提交表单时通过 ngModel 这只的变量获取用户输入的数据;
- 验证器直接设置到表单元素上,比如 Angular 内置的 required 、 email 、 pattern 、 maxlength 、 minlength 以及 ngx-validator 类库提供的 ngxMax 、 ngxMin 、 ngxUniqueCheck 。
最后在提交按钮上绑定 ngxFormSubmit 事件,当按钮点击后会触发表单验证,验证不通过会根据每个表单元素配置的提示信息反馈错误,如果使用的默认的 bootstrap4 的反馈策略,会在表单元素上加 is-invalid class 样式,同时在表单元素后追加 {相关的错误提示信息}
Email address Submit
响应式驱动表单验证
响应式表单验证和模版驱动类似,区别就是不需要给每个元素加 ngModel 和 验证器,直接使用 formControlName 指令指定名称, 然后在组件中通过 FormBuilder 生成 group 即可,基本没有特殊配置,参考 Angular 官网的响应式表单验证示例即可。
APIs
ngxFormValidator 表单配置
属性名 | 类型 | 备注 | |
---|---|---|---|
validationMessages | {[controlName: string]: {[validatorErrorKey: string]: string}} | 表单元素验证规则 | |
validationFeedbackStrategy | IValidationFeedbackStrategy | 没有配置,以全局配置的验证反馈策略为主 | |
validateOn | 'submit' \ | 'blur' | 没有配置,以全局配置的 validateOn 为主 |
validatorConfig: NgxValidatorConfig = {
validationMessages: {
username: {
required: '用户名不能为空',
pattern: '用户名格式不正确,以字母,数字,下划线组成,首字母不能为数字,必须是2-20个字符',
ngxUniqueCheck: '输入的用户名已经存在,请重新输入'
}
},
validateOn: 'submit'
};
全局配置
全局配置可以通过引入 NgxValidatorModule.forRoot(config) 进行设置,也可以在运行时注入 NgxValidatorLoader 服务进行配置
属性名 | 类型 | 备注 | |
---|---|---|---|
validationMessages | {[controlName: string]: {[validatorErrorKey: string]: string}} | 表单元素验证规则 | |
validationFeedbackStrategy | IValidationFeedbackStrategy | 没有配置,以全局配置的验证反馈策略为主 | |
globalValidationMessages | {[validatorErrorKey: string]: string} | 每个验证器全局的默认验证规则 | |
validateOn | 'submit' \ | 'blur' | 触发验证,是提交触发验证还是光标移走触发验证 |
globalValidationMessages 默认规则如下,当某个表单元素比如 username 在表单和全局的 validationMessages 都没有被设置,验证不通过会直接显示 globalValidationMessages 中的 required 提示信息
{
required: '该选项不能为空',
maxlength: '该选项输入值长度不能大于{requiredLength}',
minlength: '该选项输入值长度不能小于{requiredLength}',
ngxUniqueCheck: '输入值已经存在,请重新输入',
email: '输入邮件的格式不正确',
repeat: '两次输入不一致',
pattern: '该选项输入格式不正确',
number: '必须输入数字',
url: '输入URL格式不正确',
max: '该选项输入值不能大于{max}',
min: '该选项输入值不能小于{min}'
};
Worktile官网:www.worktile.com
本文作者:徐海峰
文章首发于「Worktile官方博客」,转载请注明来源。
Angular 表单验证类库 ngx-validator 1.0 正式发布的更多相关文章
- [php基础]PHP Form表单验证:PHP form validator使用说明
在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- Angular表单验证
novalidate 去掉html5自带的验证 ng-minlength 规定输入文本的最小长度 ng-maxlength 规定输入文本的最大长度 ng-submit 接收一个方法名 ...
- 简单的angular表单验证指令
<html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...
- angular表单验证实例----可用的代码
前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...
- 从浅入深剖析angular表单验证
最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
- angular 表单验证
最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...
- 简话Angular 05 Angular表单验证
一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 <div ng-controller="ExampleController ...
- Angular 表单验证 基础篇
<div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...
随机推荐
- ZR#996
ZR#996 解法: 若删除长度为 $ x $ 的子串后序列中没有相同元素,那么一定有至少一个长度为 $ x+1 $ 的子串,删除它后序列中也没有相同元素. CODE: #include <io ...
- Spring事务异常回滚
最近遇到了事务不回滚的情况,我还考虑说JPA的事务有bug? 我想多了....... 为了打印清楚日志,很多方法我都加tyr catch,在catch中打印日志.但是这边情况来了,当这个方法异常 ...
- Everything 的高级用法
文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论
- linux调用库的方式
linux调用库的方式有三种:1.静态链接库2.动态链接库3.动态加载库 其中1,2都是在编程时直接调用,在链接时加参数-l进行链接,运行时自动调用第三种需要在编程时使用dlopen等函数来获取库里面 ...
- 自定义Camera的setPictureSize拍照完毕出现花屏怎么解决
Camera.Parameters parameters = mCamera.getParameters();// 获得相机参数 List<Camera.Size> sizes = par ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_05-vuejs研究-vuejs基础-v-text指令
把js移到body 的下面 网速改慢一点 通过模拟网速慢的情况.刷新页面的时候会有闪烁的效果 速度快的情况下也会闪烁 ,只不过是不明显. 2.解决插值表达式闪烁问题,使用v-text v-text可以 ...
- Excel转html工具类
有时需要将Excel展示在页面上,所以需要将Excel转化为html,这里封装一个工具类. Excel和servlet访问效果如下图示: 工具类代码: POIReadExcelToHtmlUtil.j ...
- nginx使用vhost子目录
在主配置文件http模块最后添加如下一句话 [root@host---- ~]# vi /etc/nginx/nginx.conf include /etc/nginx/conf.d/*.conf; ...
- windows配置apache支持https
https://my.oschina.net/ososchina/blog/510065
- 【error】 for i in range(len(shape)/2): TypeError: 'float' object cannot be interpreted as an integer
Q: for i in range(len(shape)/2):TypeError: 'float' object cannot be interpreted as an integer A: for ...