常见用户信息表单校验

表单元素

this.validateForm = this.fb.group({
      account          : [ null, [ Validators.required, this.accountValidator ] ],//账户
      password         : [ null, [ Validators.required, this.passwordValidator ] ],//密码
      checkPassword    : [ null, [ Validators.required, this.confirmationValidator ] ],//确认密码
      name             : [ null, [ Validators.required, this.usernameValidator ] ],//用户名
      phoneNumber      : [ null, [ Validators.required, this.phoneValidator ] ],//手机号
    });

 

账户（英文、数字3-10位）

// 账户校验
  public accountValidator = (control: FormControl): { [s: string]: boolean } => {
    const EMAIL_REGEXP = /^[a-zA-Z0-9]{3,10}$/;
    if (!control.value) {
      return { required: true };
    } else if (!EMAIL_REGEXP.test(control.value)) {
      return { confirm: true, error: true };
    }
  }

用户名（中英文3-10）

public usernameValidator = (control: FormControl): { [s: string]: boolean => {
    const EMAIL_REGEXP = /^[\u2E80-\u9FFFa-zA-Z]{3,10}$/;
    if (!control.value) {
      return { required: true };
    } else if (!EMAIL_REGEXP.test(control.value)) {
      return { confirm: true, error: true };
    }
  }

密码（英文、数字、字符6-16）

public passwordValidator = (control: FormControl): { [s: string]: boolean } => {
    const EMAIL_REGEXP = /^[A-Za-z0-9#.$@!~%^&*]{6,16}$/;
    if (!control.value) {
      return { required: true };
    } else if (!EMAIL_REGEXP.test(control.value)) {
      return { confirm: true, error: true };
    }
  }

确认密码

public confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
    if (!control.value) {
      return { required: true };
    } else if (control.value !== this.validateForm.controls[ 'password' ].value) {
      return { confirm: true, error: true };
    }
  }

 

联系方式（11位手机号、座机）

public phoneValidator = (control: FormControl): { [s: string]: boolean } => {
    const EMAIL_REGEXP = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
    if (!control.value) {
      return { required: true };
    } else if (!EMAIL_REGEXP.test(control.value)) {
      return { confirm: true, error: true };
    }
  }