ES01 数据类型、正则表达式、身份证校验

<div class="panel panel-primary">
  <div class="panel-heading">身份证编号验证</div>
  <div class="panel-body div_body">
    <div class="form_div">
      <form (ngSubmit)="onNgSubmit()" [formGroup]="idcardForm">
        <mat-form-field>
            <input type="number" matInput matTooltip="身份证前六位数字代表地址信息" placeholder="请输入身份证前6位" formControlName="address" />
            <mat-error *ngIf="idcardForm.hasError(‘required‘, ‘address‘)">
              <span>6为地址是必填项</span>
            </mat-error>
            <mat-error *ngIf="idcardForm.hasError(‘addressFormatValidator‘, ‘address‘)">
              <span>{{idcardForm.getError(‘addressFormatValidator‘, ‘address‘)?.desc}}</span>
            </mat-error>
            <mat-error *ngIf="idcardForm.hasError(‘addressLengthValidator‘, ‘address‘)">
              <span>{{idcardForm.getError(‘addressLengthValidator‘, ‘address‘)?.desc}}</span>
            </mat-error>
        </mat-form-field>
        <mat-form-field>
          <input type="number" matInput matTooltip="身份证的第7到10位代表出生年份" placeholder="请输入年份" formControlName="year" />
          <mat-error *ngIf="idcardForm.hasError(‘required‘, ‘year‘)">
            <span>4为年份是必填项</span>
          </mat-error>
          <mat-error *ngIf="idcardForm.hasError(‘yearFormatValidator‘, ‘year‘)">
            <span>{{ idcardForm.getError(‘yearFormatValidator‘, ‘year‘)?.desc }}</span>
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <input type="number" matInput matTooltip="身份证第11到12位代表出生月份" formControlName="month" placeholder="请输入出生月份" />
          <mat-error *ngIf="idcardForm.hasError(‘required‘, ‘month‘)">
            <span>2位出生月份是必填项</span>
          </mat-error>
          <mat-error *ngIf="idcardForm.hasError(‘monthFormatValidator‘, ‘month‘)">
            <span>{{idcardForm.getError(‘monthFormatValidator‘, ‘month‘)?.desc}}</span>
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <input type="number" matInput matTooltip="身份证的第13到14位代表出生天数" placeholder="请输入出生天数" formControlName="day" />
          <mat-error *ngIf="idcardForm.hasError(‘required‘, ‘day‘)">
            <span>2位出生天数是必填项</span>
          </mat-error>
          <mat-error *ngIf="idcardForm.hasError(‘dayFormatValidator‘, ‘day‘)">
            <span>{{idcardForm.getError(‘dayFormatValidator‘, ‘day‘)?.desc}}</span>
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <input type="number" matInput matTooltip="身份证的15到17位数字代表顺序码" formControlName="sequenceCode" placeholder="请输入顺序码" />
          <mat-error *ngIf="idcardForm.hasError(‘required‘, ‘sequenceCode‘)">
            <span>顺序码是必填项</span>
          </mat-error>
          <mat-error *ngIf="idcardForm.hasError(‘sequenceCodeValidator‘, ‘sequenceCode‘)">
            <span>{{idcardForm.getError(‘sequenceCodeValidator‘, ‘sequenceCode‘)?.desc}}</span>
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <input type="text" matInput matTooltip="身份证最后一位是校验码" formControlName="checkCode" placeholder="请输入校验码" />
          <mat-error *ngIf="idcardForm.hasError(‘required‘, ‘checkCode‘)">
            <span>校验码是必填项</span>
          </mat-error>
          <mat-error *ngIf="idcardForm.hasError(‘checkCodeValidator‘, ‘checkCode‘)">
            <span>{{idcardForm.getError(‘checkCodeValidator‘, ‘checkCode‘)?.desc}}</span>
          </mat-error>
        </mat-form-field>
        <mat-form-field>
            <input type="text" matInput matTooltip="中国的公民身份证编号总共有18位" formControlName="idcard" placeholder="请输入身份证编号" />
            <mat-error *ngIf="idcardForm.hasError(‘required‘, ‘idcard‘)">
              <span>身份证是必填项</span>
            </mat-error>
            <mat-error *ngIf="idcardForm.hasError(‘idcardValidator‘, ‘idcard‘)">
              <span>{{idcardForm.getError(‘idcardValidator‘, ‘idcard‘)?.desc}}</span>
            </mat-error>
          </mat-form-field>
        <br />
        <br />
        <div>
          <button mat-raised-button [disabled]="!idcardForm.valid" type="submit" >提交</button>
        </div>
      </form>
    </div>
  </div>
  <div class="panel-footer">2018-3-15 09:42:00</div>
</div>

import { Component, OnInit } from ‘@angular/core‘;
import { HttpClient } from ‘@angular/common/http‘;
import { Http } from ‘@angular/http‘;
import { TestService } from ‘../test.service‘;
import { ClientBaseInfo } from ‘../../model/ClientBaseInfo‘;
import { FormControl, FormGroup, FormBuilder, Validators } from ‘@angular/forms‘;
import ‘rxjs/add/operator/debounceTime‘;      


@Component({
  selector: ‘app-test-demo‘,
  templateUrl: ‘./test-demo.component.html‘,
  styleUrls: [‘./test-demo.component.scss‘]
})
export class TestDemoComponent implements OnInit {

  idcardForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  ) {
    
  }

  ngOnInit() {
    this.idcardForm = this.formBuilder.group({
      address: [‘502225‘, [Validators.required, this.addressFormatValidator, this.addressLengthValidator], []],
      year: [‘1993‘, [Validators.required, this.yearFormatValidator], []],
      month: [‘11‘, [Validators.required, this.monthFormatValidator], []],
      day: [‘12‘, [Validators.required, this.dayFormatValidator], []],
      sequenceCode: [‘123‘, [Validators.required, this.sequenceCodeValidator], []],
      checkCode: [‘X‘, [Validators.required, this.checkCodeValidator], []],
      idcard: [‘500225199310031919‘, [Validators.required, this.idcardValidator], []]
    });
  }

  onNgSubmit() {
    console.log(this.idcardForm.value);
  }

  addressLengthValidator(fc: FormControl): {[key: string]: any} {
    let valid = String(fc.value).length === 6;
    if (fc.value === null) {
      return valid ? null : {addressLengthValidator: { desc : "你填了数据为什么要清除呢？"}}; 
    } else {
      return valid ? null : {addressLengthValidator: { desc : "地址码的长度必须为6"}};
    }
  }
  addressFormatValidator(fc: FormControl): {[key: string]: any} {
    const value = fc.value;
    const addressRegx: RegExp = new RegExp(/^[1-9]\d{5}/);
    let valid = addressRegx.test(value);
    return valid ? null : {addressFormatValidator: {desc: "地址码长6位，以数字1-9开头，后5位为0-9的数字。"}};
  } 

  // TODO:如何将多个验证条件写到一个验证器中去
  // addressValidator(fc: FormControl): {[key: string]: any} {
  //   const value = fc.value;
  //   const addressRegx: RegExp = new RegExp(/^[1-9]\d{5}/);
  //   if (String(value).length !== 6) {
  //     return {addressValidator: {desc: "地址码长6位。"}}
  //   }
  //   if (addressRegx.test(value)) {
  //     return {addressValidator: {desc: "以数字1-9开头，后5位为0-9的数字。"}};
  //   }

  // }

  yearFormatValidator(fc: FormControl): {[key: string]: any} {
    const yearRegx: RegExp = new RegExp(/(17|18|19|20)\d{2}/);
    const valid = yearRegx.test(fc.value);
    if (String(fc.value).length !== 4) {
      return {yearFormatValidator: {desc: "年份长度必须是4位"}};
    } else {
      return valid ? null : {yearFormatValidator: {desc: "年份必须是17、18、19、20作为开头"}};
    }
  }

  monthFormatValidator(fc: FormControl): {[key: string]: any} {
    const monthRegx: RegExp = new RegExp(/(0[1-9])|(1[0-1])/);
    const valid = monthRegx.test(fc.value);
    if (String(fc.value).length !== 2) {
      return  {monthFormatValidator: {desc: "月份长度必须是2位"}};
    } else {
      return valid ? null : {monthFormatValidator: {desc: "第一位数字为0，第二位数字为1-9；或者第一位数字为1，第二位数字为0-2"}};
    }
    
  }

  dayFormatValidator(fc: FormControl): {[key: string]: any} {
    const dayRegx: RegExp = new RegExp(/(([0-2][1-9])|10|20|30|31)/);
    const valid = dayRegx.test(fc.value);
    if (String(fc.value).length !== 2) {
      return {dayFormatValidator: {desc: "出生天数的长度必须是2位"}};
    } else {
      return valid ? null : {dayFormatValidator: {desc: "第一位数字为0-2，第二位数字为1-9；或者是10，20，30，31。"}};
    }
    
  }

  sequenceCodeValidator(fc: FormControl): {[key: string]: any} {
    const sequenceCodeRegx: RegExp = new RegExp(/\d{3}/);
    const valid = sequenceCodeRegx.test(fc.value);
    if (String(fc.value).length !== 3) {
      return {sequenceCodeValidator: {desc: ‘顺序码的长度必须是3位‘}};
    } else {
      return valid ? null : {sequenceCodeValidator: {desc: ‘顺序码是数字‘}};
    } 
  }

  checkCodeValidator(fc: FormControl): {[key: string]: any} {
    const checkCodeRegx: RegExp = new RegExp(/[0-9xX]/);
    const valid = checkCodeRegx.test(fc.value);
    if (String(fc.value).length !== 1) {
      return {checkCodeValidator: {desc: ‘校验码的长度必须是1位‘}};
    } else {
      return valid ? null : {checkCodeValidator: {desc: ‘校验码自能是数字或者X、x‘}};
    } 
  }
  
  idcardValidator(fc: FormControl): {[key: string]: any} {
    const checkCodeRegx: RegExp = new RegExp(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/);
    const valid = checkCodeRegx.test(fc.value);
    if (String(fc.value).length !== 18) {
      return {idcardValidator: {desc: ‘身份证的长度必须是18位‘}};
    } else {
      return valid ? null : {idcardValidator: {desc: ‘身份证格式错误‘}};
    } 
  }

}