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

1 基本数据类型

　　参见W3C的教程即可

2 正则表达式

　　参考博文：点击前往

3 身份证校验

　　参考博文：点击前往

<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>

HTML