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