<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: '身份证格式错误'}};} }}