Angular 表单验证类库 ngx-validator 1.0 正式发布
<p> </p><div class="markdown article-content">
<h2 id="-">背景介绍</h2>
<p>之前写了一篇 《如何优雅的使用 Angular 表单验证》，结尾处介绍了统一验证反馈的类库 <span class="cnblogs_code">ngx-validator</span> ，由于这段时间一直在新模块做微前端以及相关业务组件库，工具等开发，一直拖到现在，目前正式版 1.0 终于可以发布了。<br>可能有些人没有阅读过那篇博客，我这里简单介绍下 ngx-validator 主要的功能。</p>
<ol>
<li>统一验证规则和错误反馈策略，通过响应式（配置的方式）设置每个元素对应每个验证器的错误提示文案以及统一错误信息反馈，避免手动写重复的模版实现错误提示，让开发人员专心写业务即可；</li>
<li>扩展一些 Angular 本身没有提供验证器和模版驱动的验证指令，比如 <span class="cnblogs_code">ngxUniqueCheck</span> 、 <span class="cnblogs_code">ngxMax</span> 、 <span class="cnblogs_code">ngxMin</span> ;</li>
<li>支持模版驱动和响应式驱动表单的验证。</li>
</ol>
<p>从上次 0.0.1 版本到 1.0.0 正式发布新增了的功能有：</p>
<ol>
<li>新增了 <span class="cnblogs_code">validateOn</span> 支持 <span class="cnblogs_code">submit</span> 和 <span class="cnblogs_code">blur</span> 光标移走验证，之前只有点击按钮提交才会验证</li>
<li>对响应式表单支持的完善；</li>
<li>测试和 Demo 的完善；</li>
<li>重构了代码，添加了自动生成 changelog 和 husky 钩子做 commit message 规范检查和自动格式化（这些和库的功能无关，与开发者有关）</li>
</ol>
<h2 id="-">使用方式</h2>
<p>如果你不想听我废话，可以直接看 示例 ，其中包括模版驱动和响应式驱动表单实现验证的全部代码。</p>
<p> </p>
<center class="unindent"><img src="https://github.com/why520crazy/ngx-validator/blob/master/packages/integration/src/assets/images/ngx-validator-live-demo.gif?raw=true"></center>
<p> </p>
<h4 id="-">安装</h4>
<p>在你的项目中执行命令 <span class="cnblogs_code">npm install @why520crazy/ngx-validator --save</span> 进行模块的安装</p>
<h4 id="-">引入模块</h4>
<p>在启动模块 AppModule 中直接引入 <span class="cnblogs_code">NgxValidatorModule</span> ，当然引入的时候可以通过 <span class="cnblogs_code">NgxValidatorModule.forRoot</span> 进行一些全局参数的配置，配置包含全局的验证错误信息，错误反馈方式，目前反馈方式支持 boostrap4 的表单错误样式和 noop（什么都不提示），当然你可以扩展自己的错误反馈策略。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:erlang;gutter:true;">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 {}
</pre>
</div>
<h4 id="-">模版驱动表单验证</h4>
<p>在 form 表单元素上添加 <span class="cnblogs_code">ngxFormValidator</span> 指令，配置的参数和全局配置的参数类似，此处单独配置只会对当前 Form 有效。<br>由于 <span class="cnblogs_code">ngxFormValidator</span> 采用的验证器，以及元素是否验证通过完全读取的是 Angular 表单提供的信息，所以模版驱动表单必须遵循 Angular 表单的一些规则：</p>
<ol>
<li>表单元素必须设置一个 name，这个 name 会和 <span class="cnblogs_code">ngForm controls</span> 中的对象对应;</li>
<li>表单元素必须设置 <span class="cnblogs_code">ngModel</span> ，当提交表单时通过 ngModel 这只的变量获取用户输入的数据；</li>
<li>验证器直接设置到表单元素上，比如 Angular 内置的 <span class="cnblogs_code">required</span> 、 <span class="cnblogs_code">email</span> 、 <span class="cnblogs_code">pattern</span> 、 <span class="cnblogs_code">maxlength</span> 、 <span class="cnblogs_code">minlength</span> 以及 ngx-validator 类库提供的 <span class="cnblogs_code">ngxMax</span> 、 <span class="cnblogs_code">ngxMin</span> 、 <span class="cnblogs_code">ngxUniqueCheck</span> 。</li>
</ol>
<p>最后在提交按钮上绑定 <span class="cnblogs_code">ngxFormSubmit</span> 事件，当按钮点击后会触发表单验证，验证不通过会根据每个表单元素配置的提示信息反馈错误，如果使用的默认的 bootstrap4 的反馈策略，会在表单元素上加 <span class="cnblogs_code">is-invalid</span> class 样式，同时在表单元素后追加 <span class="cnblogs_code">{相关的错误提示信息}</span> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:erlang;gutter:true;"> Email address
Submit
</pre>
</div>
<p> </p>
<center class="unindent"><img src="https://github.com/why520crazy/ngx-validator/blob/master/packages/integration/src/assets/images/email-address-error.png?raw=true"></center>
<p> </p>
<p> </p>
<center class="unindent"><img src="https://github.com/why520crazy/ngx-validator/blob/master/packages/integration/src/assets/images/email-address-error-dom.png?raw=true"></center>
<p> </p>
<h4 id="-">响应式驱动表单验证</h4>
<p>响应式表单验证和模版驱动类似，区别就是不需要给每个元素加 ngModel 和 验证器，直接使用 <span class="cnblogs_code">formControlName</span> 指令指定名称, 然后在组件中通过 <span class="cnblogs_code">FormBuilder</span> 生成 group 即可，基本没有特殊配置，参考 Angular 官网的响应式表单验证示例即可。</p>
<h2 id="apis">APIs</h2>
<h4 id="ngxformvalidator-">ngxFormValidator 表单配置</h4>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>备注</th></tr>
</thead>
<tbody>
<tr>
<td>validationMessages</td>
<td>{: {: string}}</td>
<td>表单元素验证规则</td>
</tr>
<tr>
<td>validationFeedbackStrategy</td>
<td>IValidationFeedbackStrategy</td>
<td>没有配置，以全局配置的验证反馈策略为主</td>
</tr>
<tr>
<td>validateOn</td>
<td>'submit' \</td>
<td>'blur'</td>
<td>没有配置，以全局配置的 validateOn 为主</td>
</tr>
</tbody>
</table>
<div class="cnblogs_Highlighter">
<pre class="brush:erlang;gutter:true;">validatorConfig: NgxValidatorConfig = {
validationMessages: {
username: {
required: '用户名不能为空',
pattern: '用户名格式不正确，以字母，数字，下划线组成，首字母不能为数字，必须是2-20个字符',
ngxUniqueCheck: '输入的用户名已经存在，请重新输入'
}
},
validateOn: 'submit'
};
</pre>
</div>
<h4 id="-">全局配置</h4>
<p>全局配置可以通过引入 <span class="cnblogs_code">NgxValidatorModule.forRoot(config)</span> 进行设置，也可以在运行时注入 <span class="cnblogs_code">NgxValidatorLoader</span> 服务进行配置</p>
<table>
<thead>
<tr><th>属性名</th><th>类型</th><th>备注</th></tr>
</thead>
<tbody>
<tr>
<td>validationMessages</td>
<td>{: {: string}}</td>
<td>表单元素验证规则</td>
</tr>
<tr>
<td>validationFeedbackStrategy</td>
<td>IValidationFeedbackStrategy</td>
<td>没有配置，以全局配置的验证反馈策略为主</td>
</tr>
<tr>
<td>globalValidationMessages</td>
<td>{: string}</td>
<td>每个验证器全局的默认验证规则</td>
</tr>
<tr>
<td>validateOn</td>
<td>'submit' \</td>
<td>'blur'</td>
<td>触发验证，是提交触发验证还是光标移走触发验证</td>
</tr>
</tbody>
</table>
<p> <span class="cnblogs_code">globalValidationMessages</span> 默认规则如下，当某个表单元素比如 <span class="cnblogs_code">username</span> 在表单和全局的 <span class="cnblogs_code">validationMessages</span> 都没有被设置，验证不通过会直接显示 <span class="cnblogs_code">globalValidationMessages 中的 required</span> 提示信息</p>
<div class="cnblogs_Highlighter">
<pre class="brush:erlang;gutter:true;">{
required: '该选项不能为空',
maxlength: '该选项输入值长度不能大于{requiredLength}',
minlength: '该选项输入值长度不能小于{requiredLength}',
ngxUniqueCheck: '输入值已经存在，请重新输入',
email: '输入邮件的格式不正确',
repeat: '两次输入不一致',
pattern: '该选项输入格式不正确',
number: '必须输入数字',
url: '输入URL格式不正确',
max: '该选项输入值不能大于{max}',
min: '该选项输入值不能小于{min}'
};</pre>
</div>
</div>
<div class="article-comment">
<div class="article-comment-list"> </div>
</div>
<p>Worktile官网：www.worktile.com </p>
<p>本文作者：徐海峰</p>
<div class="markdown article-content">
<div class="markdown article-content">
<p>文章首发于「Worktile官方博客」，转载请注明来源。</p>
</div>
</div><br><br>
来源：https://www.cnblogs.com/worktile/p/10877524.html
頁:
[1]