Angular 基于复杂角色和角色位置验证输入文本字段
基本上,我是Angular和java脚本的初学者。在这里,我试图用一些条件验证一个被动表单文本字段 条件是:Angular 基于复杂角色和角色位置验证输入文本字段,angular,typescript,validation,angular-reactive-forms,Angular,Typescript,Validation,Angular Reactive Forms,基本上,我是Angular和java脚本的初学者。在这里,我试图用一些条件验证一个被动表单文本字段 条件是: 最小值长度应为7,最大值为25 有效输入可以是字母数字值以及通配符中的“星号(*)”。虽然文本字段允许输入其他特殊字符,但该输入被视为无效 Asterisk()允许从第5位到第13位作为输入,Asterisk()之后的所有内容都被视为无效。 例:8500*001001…(无效)8500*(有效) 我知道要编写简单的自定义验证。如果有人有想法,请帮助我,或者你也可以建议我。提前谢谢 如果您
如果您知道regex模式,您可以使用
验证器。模式
我建议编写一个自定义验证器比复杂的regex模式更易于维护和可读,并且您可以提供有关值验证的自定义错误消息,自定义验证器的另一个功能是,如果验证失败,则返回一个对象;如果验证成功,则返回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;
}
从“@angular/forms”导入{AbstractControl,ValidationErrors}
export const inputExtValidator=函数inputExtValidator(控件:AbstractControl):ValidationErrors | null{
让getErrorObject=函数(消息):ValidationErrors{
返回{
输入文字:对,
消息//提供与验证角色相关的自定义错误消息
}
}
let value:string=control.value | |“”;
//检查值长度是否在特定范围(如7-25)之间
if(value.length<7&&value.length<25){
返回getErrorObject(`text length必须介于7-25之间,当前长度${value.length}`);
}
//检查值是否为无效字符,如#$%^%$^/-+
设validCharacters=/^[a-zA-Z0-9\*]+$/g
if(validCharacters.test(值)==false){
返回getErrorObject(`text包含无效字符,当前值${value.length}`);
}
设星号=/^\w+\*?$/g
if(星号测试(值)==false){
返回getErrorObject(`字符串末尾只有一个星号有效,当前值${value.length}`);
}
//检查8-13号的星号位置
让indexOfAsterisk:number=value.indexOf('*');//索引基于0
如果(indexOfAsterisk>=0&(indexOfAsterisk<8 | | indexOfAsterisk>12)){
返回getErrorObject(`asterisk必须在8-13日的位置,当前*位置${indexOfAsterisk}`);
}
返回null;
}
在您的示例中,您显示的不是星号从5开始的有效位置,这将打破关于最小长度值的第一个角色,这就是我确保最小值最晚为8的原因
忘掉角度,想想基本原理。编写一个普通的旧函数并进行测试。然后用它作为一个验证器。你能举一个例子吗,我没有得到2,3point@MuhammedAlbarmawi已更新。示例AWEDSE87898798789、78978978978979879、EWRQ*5656565、1234567892*1321所有这些示例都有效吗?您能清除*吗,5-13点@Royal