ES01 數據類型、正則表達式、身份證校驗
阿新 • • 發佈：2018-03-15
uil component his 順序 field num core input cor 
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">HTML<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: ‘身份證格式錯誤‘}};
}
}
}
TS
ES01 數據類型、正則表達式、身份證校驗