Angular5+ 自定义表单验证器

Angular5+ 自定义表单验证器

Custom Validators

标签(空格分隔): Angular



首先阐述一下遇到的问题:

  • 怎样实现“再次输入密码”的验证(两个controller值相等)(equalTo)
  • 怎样反向监听(先输入“再次输入密码”,后输入设置密码)

解决思路:

  • 第一个问题,可以通过[AbstractControl].root.get([targetName])来取得指定的controller,然后比较他们的值。
  • 第二个,可以通过[target].setErrors([errors])来实现。
  1. 这是一个我的自定义表单验证:
import {AbstractControl, FormGroup, ValidatorFn} from ‘@angular/forms‘;
import {G} from ‘../services/data-store.service‘;

export class MyValidators {
  private static isEmptyInputValue(value) {
    // we don‘t check for string here so it also works with arrays
    return value == null || value.length === 0;
  }
  private static isEmptyObject(obj) {
    if (typeof obj === ‘object‘ && typeof obj.length !== ‘number‘) {
      return Object.keys(obj).length === 0;
    }
    return null;
  }

  /**
   * 等于指定controller的值
   * @param targetName 目标的formControlName
   * @returns {(ctrl: FormControl) => {equalTo: {valid: boolean}}}
   */
  static equalTo(targetName: string): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const target = control.root.get(targetName);
      if (target === null) {
        return null;
      }
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }
      return target.value === control.value ? null : {‘equalto‘: { valid: false }};
    };
  }

  /**
   * 反向输入监听指定controller是否与当前值相等
   * @param targetName
   */
  static equalFor(targetName: string): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const target = control.root.get(targetName);
      if (target === null) {
        return null;
      }
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }
      if (target.value === control.value) {
        const errors = target.errors;
        delete errors[‘equalto‘];

        if (this.isEmptyObject(errors)) {
          target.setErrors(null);
        } else {
          target.setErrors(errors);
        }
        return null;
      }
      target.setErrors({ ‘equalto‘: { valid: false } });
    };
  }

  ...
}

(注:)其中G.REGEX等的是全局变量。

  1. 然后FormBuilder来实现:
import { Component, OnInit } from ‘@angular/core‘;
import {EventsService} from ‘../../../services/events.service‘;
import {FormBuilder, FormGroup, Validators} from ‘@angular/forms‘;
import {G} from ‘../../../services/data-store.service‘;
import {fade} from ‘../../../animations/fade.animation‘;
import {MyValidators} from ‘../../../directives/my-validators.directive‘;

@Component({
  selector: ‘app-sign-up‘,
  templateUrl: ‘./sign-up.component.html‘,
  styleUrls: [‘./sign-up.component.scss‘],
  animations: [fade]
})
export class SignUpComponent implements OnInit {
  signForm: FormGroup; // 表单组FormGroup
  submitting: boolean; // 是否可以提交
  validations = G.VALIDATIONS;

  constructor(private eventsService: EventsService, private formBuilder: FormBuilder) {
    this.submitting = false;

    //
    this.init();
  }

  ngOnInit() {
    // 设置父组件标题
    this.eventsService.publish(‘setSign‘, { title: ‘注册‘, subTitle: { name: ‘立即登录‘, uri: ‘/account/sign-in‘ } });
  }

  // 立即注册
  onSubmit() {
    console.log(this.signForm.getRawValue());
  }

  // 表单初始化
  private init() {
    this.signForm = this.formBuilder.group({
      username: [‘‘, Validators.compose([Validators.required, Validators.maxLength(this.validations.USR_MAX)])],
      password: [‘‘, Validators.compose([
        Validators.required,
        Validators.minLength(this.validations.PASS_MIN),
        Validators.maxLength(this.validations.PASS_MAX),
        MyValidators.equalFor(‘passwordConfirm‘)
      ])],
      passwordConfirm: [‘‘, Validators.compose([
        Validators.required,
        Validators.minLength(this.validations.PASS_MIN),
        Validators.maxLength(this.validations.PASS_MAX),
        MyValidators.equalTo(‘password‘)
      ])]
    });
  }
}

(注:)其中fade动画效果。

  1. 然后在html模板中,显示表单验证提示信息:
<form [formGroup]="signForm" (ngSubmit)="onSubmit()" class="sign-form" @fade>

  <!-- 账号 -->
  <div class="input-group username">
    <span class="addon prev"><i class="civ civ-i-usr"></i></span>
    <input type="text"
      name="username"
      class="form-control form-control-left default"
      placeholder="请输入账号"
      formControlName="username"
      autocomplete="off">
    <ul class="errors" *ngIf="signForm.get(‘username‘).invalid && (signForm.get(‘username‘).dirty || signForm.get(‘username‘).touched)">
      <li *ngIf="signForm.get(‘username‘).hasError(‘required‘)" class="error">
        请输入您的账号!
      </li>
      <li *ngIf="signForm.get(‘username‘).hasError(‘maxlength‘)" class="error">
        账号不超过{{ validations.USR_MAX }}位!
      </li>
    </ul>
  </div> <!-- /.账号 -->

  <!-- 密码 -->
  <div class="input-group password">
    <span class="addon prev"><i class="civ civ-i-lock"></i></span>
    <input type="password"
      name="password"
      class="form-control form-control-left default"
      placeholder="请输入密码"
      formControlName="password">
    <ul class="errors" *ngIf="signForm.get(‘password‘).invalid && (signForm.get(‘password‘).dirty || signForm.get(‘password‘).touched)">
      <li *ngIf="signForm.get(‘password‘).hasError(‘required‘)" class="error">
        请输入您的密码!
      </li>
      <li *ngIf="signForm.get(‘password‘).hasError(‘minlength‘)" class="error">
        请输入至少{{ validations.PASS_MIN }}位数的密码!
      </li>
      <li *ngIf="signForm.get(‘password‘).hasError(‘maxlength‘)" class="error">
        密码不超过{{ validations.PASS_MAX }}位!
      </li>
    </ul>
  </div> <!-- /.密码 -->

  <!-- 重复密码 -->
  <div class="input-group password-confirm">
    <span class="addon prev"><i class="civ civ-i-lock"></i></span>
    <input type="password"
           name="passwordConfirm"
           class="form-control form-control-left default"
           placeholder="请再次输入密码"
           formControlName="passwordConfirm">
    <ul class="errors" *ngIf="signForm.get(‘passwordConfirm‘).invalid && (signForm.get(‘passwordConfirm‘).dirty || signForm.get(‘passwordConfirm‘).touched)">
      <li *ngIf="signForm.get(‘passwordConfirm‘).hasError(‘required‘)" class="error">
        请再次输入密码!
      </li>
      <li *ngIf="signForm.get(‘passwordConfirm‘).hasError(‘minlength‘)" class="error">
        请输入至少{{ validations.PASS_MIN }}位数的密码!
      </li>
      <li *ngIf="signForm.get(‘passwordConfirm‘).hasError(‘maxlength‘)" class="error">
        密码不超过{{ validations.PASS_MAX }}位!
      </li>
      <li *ngIf="!signForm.get(‘passwordConfirm‘).hasError(‘maxlength‘) && !signForm.get(‘passwordConfirm‘).hasError(‘minlength‘) && signForm.get(‘passwordConfirm‘).hasError(‘equalto‘)" class="error">
        两次密码输入不一致!
      </li>
    </ul>
  </div> <!-- /.重复密码 -->

  <!-- 提交按钮 -->
  <button type="submit"
          class="btn btn-primary btn-block submit"
          [disabled]="submitting || signForm.invalid">立即注册</button>
  <!-- /.提交按钮 -->

</form>

最后,我们可以看到,实现了想要的效果:



(附:)完整的自定义表单验证器:

import {AbstractControl, FormGroup, ValidatorFn} from ‘@angular/forms‘;
import {G} from ‘../services/data-store.service‘;

export class MyValidators {
  private static isEmptyInputValue(value) {
    // we don‘t check for string here so it also works with arrays
    return value == null || value.length === 0;
  }
  private static isEmptyObject(obj) {
    if (typeof obj === ‘object‘ && typeof obj.length !== ‘number‘) {
      return Object.keys(obj).length === 0;
    }
    return null;
  }

  /**
   * 等于指定controller的值
   * @param targetName 目标的formControlName
   * @returns {(ctrl: FormControl) => {equalTo: {valid: boolean}}}
   */
  static equalTo(targetName: string): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const target = control.root.get(targetName);
      if (target === null) {
        return null;
      }
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }
      return target.value === control.value ? null : {‘equalto‘: { valid: false }};
    };
  }

  /**
   * 反向输入监听指定controller是否与当前值相等
   * @param targetName
   */
  static equalFor(targetName: string): ValidatorFn {
    return (control: AbstractControl): {[key: string]: any} | null => {
      const target = control.root.get(targetName);
      if (target === null) {
        return null;
      }
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }
      if (target.value === control.value) {
        const errors = target.errors;
        delete errors[‘equalto‘];

        if (this.isEmptyObject(errors)) {
          target.setErrors(null);
        } else {
          target.setErrors(errors);
        }
        return null;
      }
      target.setErrors({ ‘equalto‘: { valid: false } });
    };
  }

  /**
   * 验证手机号
   * @returns {(ctrl: FormControl) => {mobile: {valid: boolean}}}
   */
  static get mobile() {
    return (control: AbstractControl) => {
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }

      const valid = G.REGEX.MOBILE.test(control.value);

      return valid ? null : {
        ‘mobile‘: {
          valid: false
        }
      };
    };
  }

  /**
   * 验证身份证
   * @returns {(ctrl: FormControl) => {idCard: {valid: boolean}}}
   */
  static get idCard() {
    return (control: AbstractControl) => {
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }

      const valid = G.REGEX.ID_CARD.test(control.value);

      return valid ? null : {
        ‘idcard‘: {
          valid: false
        }
      };
    };
  }

  /**
   * 验证汉字
   * @returns {(ctrl: FormControl) => {cn: {valid: boolean}}}
   */
  static get cn() {
    return (control: AbstractControl) => {
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }

      const valid = G.REGEX.CN.test(control.value);

      return valid ? null : {
        ‘cn‘: {
          valid: false
        }
      };
    };
  }

  /**
   * 指定个数数字
   * @param {number} length
   * @returns {(ctrl: FormControl) => (null | {number: {valid: boolean}})}
   */
  static number(length: number = 6) {
    return (control: AbstractControl) => {
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }

      const valid = new RegExp(`^\\d{${length}}$`).test(control.value);

      return valid ? null : {
        ‘number‘: {
          valid: false
        }
      };
    };
  }

  /**
   * 强密码(必须包含数字字母)
   * @returns {(ctrl: FormControl) => (null | {number: {valid: boolean}})}
   */
  static get strictPass() {
    return (control: AbstractControl) => {
      if (this.isEmptyInputValue(control.value)) {
        return null;
      }

      const valid = G.REGEX.STRICT_PASS.test(control.value);

      return valid ? null : {
        ‘strictpass‘: {
          valid: false
        }
      };
    };
  }
}

原文地址:https://www.cnblogs.com/jehorn/p/9687501.html

时间: 2024-10-03 23:15:39

Angular5+ 自定义表单验证器的相关文章

AngularJS自定义表单验证器

<!doctype html> <html ng-app="myApp"> <head> <script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script>

JavaScript 之表单验证(表单验证器的封装)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>        

jquery.validate.js使用之自定义表单验证规则

jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 http://www.51xuediannao.com/js/jquery/jquery_validate/ ======================================================== //扩展验证规则 //邮箱 表单验证规则jQuery.validator.

自定义表单验证

1.引入必要的文件 <link href="~/Content/easyui/themes/default/easyui.css" rel="stylesheet" /><link href="~/Content/easyui/themes/icon.css" rel="stylesheet" /> <script src="~/Content/easyui/js/jquery.min.

在AngularJS中实现自定义表单验证

除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属性可以在其所属的$scope对象中访问到,而我们又可以访问$scope对象,因此JavaScript可以间接地访问DOM中的表单属性.借助这些属性,我们可以对表单做出实时响应.可以使用下面这样的格式来访问这些属性: formName.inputFileldName.property 未修改的表单 f

iview自定义表单验证 &amp;&amp;&amp; 多表单同时验证

一.自定义验证     data () { const validateSectionFileType = (rule, value, callback) => { if (value <= 0) { callback(new Error('类型不能为空')); } else { callback(); } }; const validateSectionTime = (rule, value, callback) => { if (value === '') { callback(ne

html用JQuery自定义表单验证。

首先来看看我的表单: html部分: <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个需要的元素添加required --> <input type="text" id="

layui 自定义表单验证 以及提交表单

订购数量</span> <span style="color: red">*</span>: <input type="text" required lay-verify="required|number|isManzu" id="proOrderNum" name="proOrderNum" class="input" value="

element-ui 自定义表单验证 , 但是不出现小红心了

基本上按照文档上提供的方式做就没啥大问题 , 我遇到的问题是 , 自定义以后不显示小红星了 <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码"