angular封装的表单验证

简介: angular封装的表单验证

表单验证

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


相关文章
|
11月前
Angular 模块封装概念常见的错误理解
Angular 模块封装概念常见的错误理解
|
资源调度 JavaScript 容器
Angular封装WangEditor富文本组件
Angular封装WangEditor富文本组件
265 0
Angular 模块封装概念常见的错误理解
Angular 模块封装概念常见的错误理解
angular的format封装
在标签上使用管道符进行format
|
前端开发 JavaScript
【Angular教程】组件动效/动态组件/视图封装模式
【Angular教程】组件动效/动态组件/视图封装模式
231 0
【Angular教程】组件动效/动态组件/视图封装模式
|
3月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
|
3月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
|
3月前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
49 0
|
3月前
|
JavaScript 前端开发
Angular.js 应用中数据模式的删除操作实现
Angular.js 应用中数据模式的删除操作实现