根据复杂角色和字符位置验证输入文本字段答案

【问题标题】：Validate input Text field based on complex roles and character position根据复杂角色和字符位置验证输入文本字段
【发布时间】：2019-01-04 05:12:26
【问题描述】：

基本上我是 Angular 和 java 脚本的初学者。这里我试图用一些条件验证一个反应式表单文本字段。

条件是：

最小值长度应为 7，最大值为 25。
有效输入可以是字母数字值以及通配符中的“星号 (*)”。虽然文本字段允许输入其他特殊字符，但该输入被视为无效。
Asterisk() 允许从第 5 到第 13 个位置作为输入，而在 Asterisk() 之后的其他所有内容都被视为无效。例如：8500*001001…（无效）8500*（有效）

我知道要编写简单的自定义验证。如果有人有想法，请帮助我，或者你也可以建议我。提前致谢。

【问题讨论】：

忘记角度，考虑基本面。编写一个普通的旧函数并测试它。然后将其用作验证器。
你能举个例子吗我没有得到2,3分
@MuhammedAlbarmawi 已更新。
example AWEDSSE87898798789 , 789789789797897987879, EWRQ*565656565 ,12345678912*1321 这些例子都有效吗？？
你能清除*，5-13点@Royal

标签： angular typescript validation angular-reactive-forms

【解决方案1】：

如果您知道可以使用的正则表达式模式，可能有一些方法Validators.pattern 我建议编写自定义验证器比复杂的正则表达式模式更易于维护和可读性，并且您可以提供自定义关于值验证的错误消息，另一件事自定义验证器只是一个函数，如果验证失败则返回一个对象，如果验证成功则返回 null。

自定义响应式表单验证器

import { AbstractControl, ValidationErrors } from "@angular/forms"

export const inputTextValidator = function inputTextValidator(control: AbstractControl): ValidationErrors | null {

  let getErrorObject = function (message): ValidationErrors {
    return {
      inputText: true,
      message // provide custom error message related to the validation role
    }
  }

  let value: string = control.value || '';

  // check if value length between specific range like 7-25
  if (value.length < 7 && value.length < 25) {
    return getErrorObject(`text length must be between 7-25 ,current length ${value.length}`);
  }

  // check if value invalid characters  like #$%^%$^/-+
  let validCharacters = /^[a-zA-Z0-9\*]+$/g
  if (validCharacters.test(value) === false) {
    return getErrorObject(`text has invalid characters,current value ${value.length}`);
  }

  let asterisk = /^\w+\*?$/g
  if (asterisk.test(value) === false) {
    return getErrorObject(`only one asterisk at the end of the string is valid,current value ${value.length}`);
  }

  // check the asterisk postion at 8th-13th 
  let indexOfAsterisk: number = value.indexOf('*'); // index base on 0
  if (indexOfAsterisk >= 0 && (indexOfAsterisk < 8 || indexOfAsterisk > 12)) {
    return getErrorObject(`asterisk must bee in postion at 8 -13 th,current * postion ${indexOfAsterisk}`);
  }

  return null;
}

在您显示的示例中，星号的有效位置不是从第 5 位开始，这将打破关于值的最小长度的第一个角色，这就是为什么我要确保最小值最迟为 8 的原因

stackblitz example

【讨论】：