@interaction/form-validator

快速上手(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')