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

?

轉載于:https://www.cnblogs.com/NeverCtrl-C/p/8575991.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的ES01 数据类型、正则表达式、身份证校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。