지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Angular의 양식 유효성 검사 기능 구현에 대한 자세한 설명

Angular의 양식 유효성 검사 기능 구현에 대한 자세한 설명

小云云
풀어 주다： 2017-12-21 13:10:07
원래의
2072명이 탐색했습니다.

Angular 형식 유효성 검사는 두 가지 유형의 유효성 검사로 구분됩니다. 1. 내장 유효성 검사(필수, 최소 길이 등) 2. 사용자 정의 유효성 검사(정규 표현식) 이 글은 주로 Angular의 양식 검증 기능을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

다음으로 데모를 통해 계정을 등록하고 이 두 가지 인증이 어떻게 구현되는지 살펴보겠습니다.

프로젝트 인터페이스

1. 내장된 검증

계정 이름에는 검증과 최소 길이 검증이 필요하며, 나머지 두 개는 검증만 필요합니다

1. ---- -----app.comComponent.ts

----------app.comComponent.html

------------app.comComponent.css

---- ------app.module.ts

2. 프로젝트 코드

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

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  FormsModule,  //注册模块
  ReactiveFormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }
로그인 후 복사

app.comComponent.ts

import { Component,OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app';
 Form:FormGroup;
 data={
   name:"",
   email:"",
   tel:""
 }
 ngOnInit(): void {
   this.Form = new FormGroup({
      'name': new FormControl(this.data.name, [
       Validators.required,
       Validators.minLength(4)
      ]),
      'email': new FormControl(this.data.email, Validators.required),
      'tel': new FormControl(this.data.tel, Validators.required)
     });
  }

  get name() { return this.Form.get('name'); }
  get email() { return this.Form.get('email'); }
  get tel() { return this.Form.get('tel'); }
}
로그인 후 복사

간단히 말하면, 검증 양식은 대략 4단계로 나뉩니다.

(1) 관련 모듈 FormGroup, FormControl, Validators 가져오기

(2) 양식 검증 변수 From:FromGroup 선언

(3) 검증 규칙 정의; (4) Pass 자신이 속한 컨트롤 그룹(FormGroup)의 get 메소드를 사용하여 폼 control

app.comComponent.html

<p class="wrapper">
  <p class="row">
    <p class="title-wrapper">注册账号</p>
  </p>
  <p class="row">
    <p class="contain-wrapper" [formGroup]="Form">
      <label for="name">账户名：</label>
      <input type="text" id="name" formControlName="name"><br/>
      <p *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
        <p *ngIf="name.errors.required">
          请输入长度账户名！
        </p>
        <p *ngIf="name.errors.minlength">
          账户名长度不小于4！
        </p>
      </p>
      <label for="email">邮箱：</label>
      <input type="text" id="email" formControlName="email"><br/>
      <p *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
        <p *ngIf="email.errors.required">
          请输入邮箱！
        </p>
      </p>
      <label for="tel">电话:</label>
      <input type="text" id="tel" formControlName="tel">
      <p *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert alert-danger">
        <p *ngIf="tel.errors.required">
          请输入电话！
        </p>
      </p>
    </p>
  </p>
  <p class="row">
    <button class="btn btn-primary confirm">确认</button>
  </p>
</p>
로그인 후 복사

app.comComponent.css


*{
  font-size: 18px;
}
.wrapper{
  margin: 0 auto;
  margin-top:10%;
  width:30%;
  height: 20%;
  border:1px solid black;
  border-radius: 10px;
}

.title-wrapper{
  margin: 0 auto;
  padding-top: 20px; 
  padding-bottom: 20px;
  width:370px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}
label{
  display: inline-block;
  width:72px;
}
.contain-wrapper{
  width: 300px;
  margin:0 auto;
}
.confirm{
  margin-top:20px;
  width:100%;

}
로그인 후 복사

3에 액세스합니다. 프로젝트 효과


II, 맞춤 검증

맞춤 양식 검증을 위해서는 맞춤 검증기를 생성해야 합니다. 다음으로 이메일 주소의 검증을 단순 존재 검증이 아닌 형식화된 검증으로 변경해 보겠습니다. 프로젝트 디렉터리 변경 사항을 살펴보세요
1. 프로젝트 디렉터리

----------app.comComponent.ts

------------app.comComponent.html

----- -----app.comComponent.css

----------app.module.ts

------------emailAuthentication.ts

2 . 프로젝트 코드

app.module.ts

사용자 정의 유효성 검사기 등록 EmailValidatorDirective

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { FormsModule,ReactiveFormsModule }  from &#39;@angular/forms&#39;;
import { EmailValidatorDirective } from &#39;./emailAuthentication&#39;;

import { AppComponent } from &#39;./app.component&#39;;

@NgModule({
 declarations: [
  AppComponent,
  EmailValidatorDirective
 ],
 imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }
로그인 후 복사

emailAuthentication.ts


import { Directive, Input, OnChanges, SimpleChanges } from &#39;@angular/core&#39;;
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from &#39;@angular/forms&#39;;

/** A hero&#39;s name can&#39;t match the given regular expression */
export function emailValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    const forbidden = !nameRe.test(control.value);
    return forbidden ? { &#39;forbiddenName&#39;: { value: control.value } } : null;
  };
}

@Directive({
  selector: &#39;[appForbiddenName]&#39;,
  providers: [{ provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true }]
})
export class EmailValidatorDirective implements Validator {
  @Input() forbiddenName: string;

  validate(control: AbstractControl): { [key: string]: any } {
    return this.forbiddenName ? emailValidator(new RegExp(this.forbiddenName, &#39;i&#39;))(control)
      : null;
  }
}
로그인 후 복사

app.comComponent.ts


import { Component,OnInit } from &#39;@angular/core&#39;;
import { FormGroup, FormControl, Validators } from &#39;@angular/forms&#39;;
import { emailValidator } from &#39;./emailAuthentication&#39;; //导入emailValidator自定义验证器

@Component({
 selector: &#39;app-root&#39;,
 templateUrl: &#39;./app.component.html&#39;,
 styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent {
 title = &#39;app&#39;;
 //email的正则表达式
 emailExp = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;
 Form:FormGroup;
 data={
   name:"",
   email:"",
   tel:""
 }
 ngOnInit(): void {
   this.Form = new FormGroup({
      &#39;name&#39;: new FormControl(this.data.name, [
       Validators.required,
       Validators.minLength(4)
      ]),
      &#39;email&#39;: new FormControl(this.data.email, [
        Validators.required,
        emailValidator(this.emailExp) //自定义验证器
        ]),
      &#39;tel&#39;: new FormControl(this.data.tel, Validators.required)
     });
  }

  get name() { return this.Form.get(&#39;name&#39;); }
  get email() { return this.Form.get(&#39;email&#39;); }
  get tel() { return this.Form.get(&#39;tel&#39;); }
}
로그인 후 복사

app.comComponent.html 


<p class="wrapper">
  <p class="row">
    <p class="title-wrapper">注册账号</p>
  </p>
  <p class="row">
    <p class="contain-wrapper" [formGroup]="Form">
      <label for="name">账户名：</label>
      <input type="text" id="name" formControlName="name"><br/>
      <p *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
        <p *ngIf="name.errors.required">
          请输入账户名！
        </p>
        <p *ngIf="name.errors.minlength">
          账户名长度不小于4！
        </p>
      </p>
      <label for="email">邮箱：</label>
      <input type="text" id="email" formControlName="email" required><br/>
      <p *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
        <p *ngIf="email.errors.forbiddenName">
         请输入正确格式的邮箱！
        </p>
      </p>
      <label for="tel">电话:</label>
      <input type="text" id="tel" formControlName="tel">
      <p *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert alert-danger">
        <p *ngIf="tel.errors.required">
          请输入电话！
        </p>
      </p>
    </p>
  </p>
  <p class="row">
    <button class="btn btn-primary confirm" [disabled]="Form.invalid" >确认</button>
  </p>
</p>
로그인 후 복사

최종 확인 시 버튼의 비활성화 속성을 설정하여 양식 확인에 실패하면 확인 버튼을 클릭할 수 없으며 클릭할 수 없는 상태로 표시됩니다. [비활성화]="Form.invalid".


3. 프로젝트 효과

관련 권장 사항:

jquery 양식 유효성 검사 플러그인

jQuery 양식 유효성 검사의 인스턴스 코드

JavaScript에서 양식 유효성 검사 구현

위 내용은 Angular의 양식 유효성 검사 기능 구현에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
angular 형태 확인하다
원천：php.cn
이전 기사：지정된 영역 이외의 곳을 클릭하면 jQuery의 숨겨진 DIV 기능에 대한 자세한 설명 다음 기사：Vue.js의 가장 완벽한 사용법에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Angular 7은 SCSS에서 중복 속성을 제거합니다. AngularSASS(.scss)는 속성을 제거합니다. 브라우저 간 호환성을 위해 중복 속성을 포함할 수 있도록 이런 일이 발생하지 않도록 하려면 어떻게 해야 합...
에서 2024-04-04 23:28:54
0
1
1382
Angular 애플리케이션에서 Javascript 프로토타입 생성자를 가져올 때 오류가 발생합니다. 생성자가 있는 JS 파일을 가져오려고 하는 Angular 애플리케이션이 있습니다. 하지만 애플리케이션을 실행하면 webpack에서 오류가 발생합니다. 자산의 Ja...
에서 2024-04-04 11:36:15
0
1
288
Ajax를 사용하여 콘텐츠 생성 - ID로 스크롤하면 작동하지 않습니다. Ajax를 통해 얻은 데이터를 기반으로 페이지 콘텐츠를 생성합니다. 내가 겪고 있는 문제는 특정 ID로 스크롤하려고 할 때 스크롤이 발생하지 않거나 잘못된 위치로...
에서 2024-04-04 09:29:39
0
1
397
Angular에서 원형 SVG 온도 드래거를 만드시겠습니까? 다음은 제가 Angular에서 만들려고 하는 원형 썸 드래거의 정적 데모입니다. rinkle-dashoffset="-260" 설정을 사용하여 엄...
에서 2024-04-03 09:33:29
0
1
376
Angular: 텍스트 요소 색상을 이해하기 위한 속성 바인딩에 반응성이 부족합니다. 다음은 내 .ts 파일입니다. import{Component}from'@angular/core';@Component({selector:'app-event-bind...
에서 2024-04-01 17:28:52
0
1
358
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿