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

ES01 数据类型、正则表达式、身份证校验的更多相关文章

  1. Java 常用正则表达式,Java正则表达式,Java身份证校验,最新手机号码正则表达式

    Java 常用正则表达式,Java正则表达式,Java身份证校验,最新手机号码校验正则表达式 ============================== ©Copyright 蕃薯耀 2017年11 ...

  2. Python 身份证校验代码

    Python 身份证校验代码 居民身份证bai编号识别 1.身份证编码规则如下:根据[中华人民共和国国家标准GB11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本 ...

  3. 篇二:JS身份证校验

    身份证校验 function identityCodeValid(code) { var city={11:"北京",12:"天津",13:"河北&q ...

  4. Powerbuilder编写身份证校验码

    public function boolean of_calc_cardid_verifycode (string as_cardid, ref string as_verifycode); /* 计 ...

  5. java实现身份证校验

    原文来自:java教程网 题目:身份证校验   身份证校验   如果让你设计个程序,用什么变量保存身份证号码呢?长整数可以吗?不可以!   因为有人的身份证最后一位是"X"   实 ...

  6. 最严格的身份证校验(JavaScript版)

    在JavaWeb研发过程中为了获取有效的用户信息,校验其数据的有效性非常是必要,以下贴出在项目中用到的关于身份证的校验: <!DOCTYPE HTML PUBLIC "-//W3C// ...

  7. 身份证校验程序(下)- 零基础入门学习Delphi49

    身份证校验程序 让编程改变世界 Change the world by program [caption id="attachment_2699" align="alig ...

  8. 身份证校验程序(上)- 零基础入门学习Delphi48

    身份证校验程序 让编程改变世界 Change the world by program [caption id="attachment_2699" align="alig ...

  9. 完美实现身份证校验 js正则

    注意: 1.只针对18为身份证号码进行校验,现在15位的应该很少了, 2.不区分xX大小写, 3.出生年份1900-2099,每月的天数也进行相关验证(考虑的闰月的情况), 4.校验规则详见,这个写的 ...

随机推荐

  1. 条款39:明智的使用private继承

    首先看一下private继承的法则:class之间的继承关系如果是private的话,那么编译器不会将一个derived对象自动当作为一个base class对象. 从base class继承而来的所 ...

  2. 不能解决,复选框在request对象获取的信息后显示在用户信息里面为中文的选项名

    因为方框里面value 不用中文?.? 假如用中文呢?  完全可以!!已经试验 如果不用中文,那么中文可以用对象的参数来获得,即在login.jsp中就要用javabean类属性

  3. mysql中获取自增函数解析

    1 如果 一条语句多行插入,默认情况下是返回第一行的自增id 2 存储过程可以与外部共享自增,而函数和触发器不能,因为在函数和触发器关闭的时候,自增自动restore 3 获取自增id,不会因为并发产 ...

  4. 牛客网 PAT乙级(Basic Level)练习题 1023 考新郎

    题目描述 过年期间,老家举行了一场盛大的集体婚礼,为了使婚礼进行的丰富一些,司仪临时想出了有一个有意思的节目,叫做“考新郎”,具体的操作是这样的: 1. 首先,给每位新娘打扮得几乎一模一样,并盖上大大 ...

  5. 1109. Group Photo (25)

    Formation is very important when taking a group photo. Given the rules of forming K rows with N peop ...

  6. Python 2.7_爬取CSDN单页面博客文章及url(二)_xpath提取_20170118

    上次用的是正则匹配文章title 和文章url,因为最近在看Scrapy框架爬虫 需要了解xpath语法 学习了下拿这个例子练手 1.爬取的单页面还是这个rooturl:http://blog.csd ...

  7. Httpclient远程调用WebService示例

    我们将Web Service发布在Tomcat或者其他应用服务器上后,有很多方法可以调用该Web Service,常用的有两种: 1.通过浏览器HTTP调用,返回规范的XML文件内容      2.通 ...

  8. vc++2008 采用GSoap访问 WebService

    (转http://www.cppblog.com/yeqing/articles/12762.html) 前一阶段写gSOAP 的文章没保存好,后来想写的,越学越没有写的勇气了,感觉自己很菜,但是现在 ...

  9. ELK多种架构及优劣

    圈子里关于大数据.云计算相关文章和讨论是越来越多,愈演愈烈.行业内企业也争前恐后,群雄逐鹿.而在大数据时代的运维挑站问题也就日渐突出,任重而道远了.本文旨在针对复杂的大数据运维系统推荐一把利器,达到抛 ...

  10. 分区工具parted的详解及常用分区使用方法

    一.         parted的用途及说明 概括使用说明: parted用于对磁盘(或RAID磁盘)进行分区及管理,与fdisk分区工具相比,支持2TB以上的磁盘分区,并且允许调整分区的大小.   ...