表单验证
创建vaildate文件
import { AbstractControl, FormControl, } from'@angular/forms'; exportclassvalidatorcheck { /** * 验证账号 * 帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线组合 */publicusernameVal(username: FormControl) { letvalue=username.value; if (!value) { return { msg: '请输入账号' }; } else { constres=value.match(/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/) returnres? {} : { msg: '账号格式不正确' }; } } /** * 验证密码 * 密码以字母开头,长度在6~18之间,只能包含字母、数字和下划线 */publicpasswordVal(password: FormControl): object { letvalue=password.value; if (!value) { return { msg: '请输入密码' }; } else { constvalid=value.match(/^[a-zA-Z]\w{5,17}$/); returnvalid? {} : { msg: '密码格式不正确' }; } } /** * 验证手机号 */publicphoneVal(phone: FormControl): object { constvalue=phone.value||''; if (!value) { return { msg: '请输入手机号' }; } else { constvalid=/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/.test(value); returnvalid? {} : { msg: '手机号必须是11位数字' }; } } /** * email地址 */publicemailVal(phone: FormControl): object { constvalue=phone.value||''; if (!value) { return { msg: '请输入email地址' }; } else { constvalid=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value); returnvalid? {} : { msg: 'email格式错误' }; } } /** * 验证数字 * 是否是纯数字 */publicnumberlVal(phone: FormControl): object { constvalue=phone.value||''; if (value===undefined||null) { return { msg: null }; } else { constvalid=/^[0-9]$/.test(value); returnvalid? {} : { msg: '不是number类型' }; } } /** * 判定输入的内容为全角。 */publicFullAnglelVal(phone: FormControl): object { constvalue=phone.value||''; if (value===undefined||null) { return { msg: null }; } else { constvalid=/[\uff00-\uffff]/g.test(value); returnvalid? {} : { msg: '输入的内容不是全角' }; } } /** * 判定输入的内容为半角。 */publicsemiangleVal(phone: FormControl): object { constvalue=phone.value||''; if (!value) { return { msg: null }; } else { constvalid=/[\u0000-\u00ff]/g.test(value); returnvalid? {} : { msg: '输入的内容不是半角' }; } } }
使用
app.module.ts里进行挂载
import { BrowserModule } from'@angular/platform-browser'; import { NgModule } from'@angular/core'; import { FormsModule,ReactiveFormsModule } from'@angular/forms'; import { AppComponent } from'./app.component'; import { Login0000Component } from'../views/login0000.component'; import { AppRoutingModule } from"./app-routing.module"import { BrowserAnimationsModule } from'@angular/platform-browser/animations'; import { PdfViewerModule } from'ng2-pdf-viewer'; import { HttpClientModule } from'@angular/common/http'; import { CommonPartsModule } from'../shared/common-parts/common-parts.module'; import {validatorcheck} from'../shared/common-parts/validate/index'@NgModule({ declarations: [ AppComponent, Login0000Component, ], imports: [ BrowserModule, FormsModule, AppRoutingModule, BrowserAnimationsModule, PdfViewerModule, HttpClientModule, CommonPartsModule, ReactiveFormsModule, ], providers: [ validatorcheck ], bootstrap: [AppComponent] }) exportclassAppModule { }
在组件里使用
page.component.ts
import { Component, OnInit } from'@angular/core'; import { FormControl, FormGroup, FormBuilder, Validators } from'@angular/forms'; //引入checkimport { validatorcheck } from'../shared/common-parts/validate/index'@Component({ selector: 'app-demo', templateUrl: './login0000.component.html', styleUrls: [] }) exportclassLogin0000ComponentimplementsOnInit { publicflag=false// 构造constructor(privatefb: FormBuilder, publicv: validatorcheck) { } submit() { this.flag=true } // 使用valiDataForm: FormGroup=this.fb.group({ username: ['', [Validators.required, this.v.usernameVal]], password: ['', [Validators.required, this.v.passwordVal]], phone: ['', [Validators.required, this.v.phoneVal]] }) ngOnInit(): void { } }
page.component.html
<divaction=""[formGroup]="valiDataForm"> 帐号: <inputrequiredtype="text"formControlName="username"><br><p*ngIf="flag"> {{valiDataForm.get('username')?.errors?.['msg']}}</p> 密码: <inputrequiredtype=" text"formControlName="password"><br><p*ngIf="flag">{{valiDataForm.get('password')?.errors?.['msg']}}</p> 手机号: <inputrequiredtype="text"formControlName="phone"><br><p*ngIf="flag">{{valiDataForm.get('phone')?.errors?.['msg']}}</p><button(click)="submit()">提交</button></div>