快速上手(FormValidator)

安装

npm i @interaction/form-validator

导入

import { FormValidator } from '@interaction/form-validator';

使用

表单实例化时，直接将验证加入。如下ts代码

export class Component {
  public form: FormGroup;
  constructor(
    private fb: FormBuilder
  ) {
    this.form = this.fb.group({
      input: [null, [FormValidator.phoneValidator()]]  // 这里使用
    });
  }
}

通过nz-form-explain标签捕获错误。如下html代码

<form nz-form [formGroup]="form" >
	<nz-form-item>
       <nz-form-label nzRequired>输入框</nz-form-label>
        <nz-form-control>
            <input 
               nz-input
               formControlName="input" />
            <nz-form-explain *ngIf="form?.get('input')?.dirty && form?.get('input')?.errors">
                <nz-form-explain *ngIf="form?.get('input')?.hasError('phone')">  // 这里是使用代码
                    只支持数字、字母或下划线
                </nz-form-explain>
            </nz-form-explain>
        </nz-form-control>
    </nz-form-item>
</form>

介绍

| 验证函数 | 含义 | 是否有参数 | 参数默认值 | html错误字段 | | ----------------------- | ------------------------------------- | ---------- | ------------------------------------------------------------ | -------------------------- | | trimSidesValidator | 强制必填项（两侧不能有空格） | 无 | | hasError('trimSides') | | phoneValidator | 手机号验证 | 有 | /^1[3-9]{2}[0-9]{8}$/ | hasError('phone') | | cardIDValidator | 身份证号验证 | 有 | /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2][0-9])|(3[0-1]))\d{3}(\d|x|X)$/ | hasError('cardID') | | emailValidator | 电子邮箱验证（多邮箱用分号分隔） | 有 | /^((([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6};))(([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})))$/ | hasError('email') | | numValidator | 纯数字验证（包括小数） | 有 | /^[0-9]+(.[0-9]+)?$/ | hasError('num') | | enValidator | 纯英文验证 | 有 | /^[a-zA-z]+$/i | hasError('en') | | enNumUnderlineValidator | 只支持英文、数字和下划线 | 有 | /^\w+$/i | hasError('enNumUnderline') | | charMaxLength | 中英文字符最大长度 | 有 | 255(最大长度默认为255) | hasError('charMaxLength') | | checkboxChecked | 验证checkbox选中 | 有 | 1（至少一个被选中） | hasError('noMatch') | | checkboxCheckedAll | 验证checkbox必须全部选中 | 无 | | hasError('noMatch') | | notEmptyArray | 数组不为空验证 | 有 | 1（至少一个不为空） | hasError('empty') | | notEmptyArrayAll | 数组中必须全部有值 | 无 | | hasError('empty') | | IPValidator | IP地址验证 | 有 | /^(([0-9]{0,3}).){3}([0-9]{0,3})$ | hasError('ip') | | pathValidator | 文件路径验证 | 有 | /^/.$/i | hasError('path') | | urlValidator | url验证 | 有 | /^((http|ftp|https)://)?([\w-]+.)+[\w-]+([\w-./?%&=]*)?$/ig | hasError('url') |