@interaction/form-validator NPM

快速上手(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	手机号验证	有	/^13-9{2}0-9{8}$/	hasError('phone')
cardIDValidator	身份证号验证	有	/^1-9\d{5}1-9\d{3}((01-9)\|(10-2))((01-9)\|([1-2]0-9)\|(30-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')