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 addressSubmit
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-asOsKvdJ-1582256395359)(https://github.com/why520crazy/ngx-validator/blob/master/packages/integration/src/assets/images/email-address-error.png?raw=true)]
响应式驱动表单验证
响应式表单验证和模版驱动类似,区别就是不需要给每个元素加 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}'
};
扩展方法
- 单独验证某一个表单元素, 获取到
NgxFormValidatorDirective
实例ngxFormValidator: NgxFormValidatorDirective
,通过调用ngxFormValidator.validator.validateControl(name: string)
方法单独验证; - 根据服务端返回的错误,设置某个表单元素错误提示信息,调用
ngxFormValidator.validator.markControlAsError(name: string, errorMessage: string)
自定义反馈策略
如果你的项目不是使用 bootstrap4,而是其他 UI 库,那么可以通过扩展自己的错误反馈策略,然后在全局设置中配置一次后所有的表单验证都会使用配置之后的策略,以下是一个自定义反馈策略的示例:
const CUSTOM_INVALID_CLASS = 'custom-invalid';
const CUSTOM_INVALID_FEEDBACK_CLASS = 'custom-invalid-feedback';export class CustomValidationFeedbackStrategy implements IValidationFeedbackStrategy {showError(element: HTMLElement, errorMessages: string[]): void {element.classList.add(CUSTOM_INVALID_CLASS);// add element show error message}removeError(element: HTMLElement): void {element.classList.remove(CUSTOM_INVALID_CLASS);// remove element error message}
}
Worktile官网: https://worktile.com/
本文作者:徐海峰
文章首发于「Worktile官方博客」,转载请注明来源。
Angular 表单验证类库 ngx-validator 1.0 正式发布相关推荐
- php form validator 下单,PHP Form表单验证:PHP form validator使_php
在php网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- 如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
- angular表单验证 1
表单验证 通常,我们都需要对用户的表单输入做验证,以保证数据的整体质量. Angular也有两种验证表单的形式: 使用属性验证,用于模板驱动表单: 使用验证器函数进行验证,用于响应式表单. 验证器(V ...
- Angular 表单验证
模板驱动验证 使用模板驱动验证需要依赖于原生的HTML表单验证器 Angular 会用指令来匹配具有验证功能的这些属性. 原生的HTMl验证器主要分两种 通过语义类型来进行定义 通过验证相关的属性来进 ...
- vue表单验证rules以及validator验证器的使用
为防止用户犯错,尽可能更早地发现并纠正错误. Element中Form (表单)组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设 ...
- 轻量级的jQuery表单验证插件 - HAPPY.js
为什么80%的码农都做不了架构师?>>> 日期:2012-9-14 来源:GBin1.com 在线演示 本地下载 功能强大的表单验证插件很多,以前我们介绍过validati ...
- angularjs表单验证_AngularJS表单验证
angularjs表单验证 We have updated this article for Angular 1.3 and the new ng-touched feature. 我们已经为Angu ...
- element-plus表单验证使用 个人总结
前言 表单验证能通过设置验证规则验证用户的输入,并对不规范的输入做出对应提示.尤其是在大表单中,它能让验证变得清晰.美观.可维护.element-plus(包括element-ui)都提供了表单验证功 ...
最新文章
- awk内建变量示例详解之NR、FNR、NF
- 通过ssl调用远程WebService
- 学习笔记--asp.net母版页(转自msdn,仅为自己学习存储和有意读者使用)
- java 时间格式化_还在用SimpleDateFormat格式化时间?小心经理锤你
- 大数据学习总结(4)参考splunk架构
- 快速开发字段很多的MIS表
- java工程师职业价值观_什么是职业价值观?舒伯职业价值观测试
- 对于火灾和火焰检测的初步学习
- 2021-01-27
- github建立自己的个人网站
- win10 - 淡绿色护眼背景(注册表)
- 斯坦福的著名小兔子模型的点云数据_基于正交投影的点云局部特征描述详解
- 最近在论证一个问题,到底是先有鸡还是先有蛋:
- word中如果出现某一行突然文字突然间距增大,两种解决方案
- 智慧城市同城V4 v2.2.5 [独立版全插件]同城 同城小程序 同城信息
- 华为云鲲鹏服务器部署文档-修正版-CentOS+java微服务开发
- 北京东城区社保转出业务个人办理图解流程,需要的朋友可以参考
- 大数据破解污染图谱 北风与雾霾啥关系
- VMWare快照原理(写时复制)?快照保护、快照克隆的作用?
- 唯链品牌重塑全球发布会在新加坡成功举办