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

问题描述：

基本上我是Angular和Java脚本的初学者.在这里，我尝试在某些条件下验证反应式表单文本"字段.

Basically I am a beginner to Angular as well as java script. Here am trying to validate a Reactive form Text field with some conditions.

条件是:

最小值的长度应为7，最大值为25.
有效输入可以是字母数字值，也可以是通配符中的星号(*)".尽管文本字段允许输入其他特殊字符，但该输入被认为是无效的.
Asterisk()从第5位到第13位作为输入，在Asterisk()之后，其他所有内容均视为无效. 例如:8500 * 001001…(无效)8500 *(有效)

min value length should 7 and max is 25 .
Valid input could be Alphanumeric values along with ‘Asterisk (*)’ from wildcard characters. Though text field allows to enter other special characters but that input is considered as invalid.
Asterisk() is allowed to give as input from 5th to 13th position , and everything else is considered as invalid after Asterisk(). Eg: 8500*001001… (Invalid) 8500* (valid)

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

I am aware to write simple custom validations. If any one having idea please help me out or you can suggest me as well. Thanks in Advance.

答

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

There are may way if you know the regex pattern you can use Validators.pattern I recommend writing a custom validator will be easier to maintain and more readable than complex regex pattern , and you can provide custom error message about validation of the value , another thing custom validator is just a function that return an object if the validation is failed or null if the validation succeed.

自定义反应形式验证器

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

Not in your example you show is the valid position for asterisk start from 5th and this will break the first role about the min length of the value that why I make sure the min is 8 at latest

stackblitz示例

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

相关推荐