进行Angular 2表单验证。 如何防止用户在输入文本框中输入特殊字符？

Question

Angular 2表单验证

场景：

如果用户尝试将特殊字符输入到输入type =“ text”中，应防止输入该特殊字符？

特殊字符不应该出现在相应的文本框中？

Answer 1

代码，如下所示解决插入符号位置问题
1.在主机侦听器中将事件类型更改为“（输入）”。
2.在班级内部定义插入符号的开始和结束位置，它可以解决问题

@Directive({
selector: '[ngModel][maskSpecialCharacter]',
host: {
    '(ngModelChange)': 'onInputChange($event)',
    '(input)': 'onInputChange($event.target.value, true)'
 }
})
      export class SpecialCharacterMask {
         constructor(public model: NgControl, public ele: ElementRef, public render: Renderer) { }

onInputChange(event, backspace) {
    var position = this.ele.nativeElement.selectionStart;
    var value = event.replace(/[!$%^&*()+|~=`{}\[\]:";#@'<>?,.\/\\]/gi, '');
    this.render.setElementProperty(this.ele.nativeElement, "value", value);
    this.ele.nativeElement.selectionEnd = position;
}
}

Answer 2

您可以创建一个自定义验证器，

import { FormControl } from '@angular/forms'

export function restrictedWords(words) {
    return (control: FormControl): { [key: string]: any } => {
        if (!words) return null
        var invalidWords = words.map(w => control.value.includes(w) ? w : null)
            .filter(w => w != null)
        return invalidWords && invalidWords.length > 0
            ? { 'restrictedWords': invalidWords.join(', ') }
            : null
    }
}

从表单中调用自定义验证器函数，

this.textBox1 = new FormControl('',[Validators.required, Validators.maxLength(400), restrictedWords(['foo','bar'])])

Answer 3

角反应形式的方法：

需要在表单验证中添加验证器。 另外，以下正则表达式不适用于国际化。 请根据需要更改正则表达式。

    this.form= this.formBuilder.group({
        name: ['', [ Validators.required, Validators.pattern(/^[a-zA-Z0-9!@#$%^&*()]+$/)] ],
        description: ['']
    });

请注意，Validators.pattern方法不需要引号

方法2

export function isSecuredInput(input: string): boolean {
    const tagBody = '(?:[^"\'>]|"[^"]*"|\'[^\']*\')*';
    const tagOrComment = new RegExp(
        '<(?:'
        // Comment body.
        + '!--(?:(?:-*[^->])*--+|-?)'
        // Special "raw text" elements whose content should be elided.
        + '|script\\b' + tagBody + '>[\\s\\S]*?</script\\s*'
        + '|style\\b' + tagBody + '>[\\s\\S]*?</style\\s*'
        // Regular name
        + '|/?[a-z]'
        + tagBody
        + ')>',
        'gi');

    return input.search(tagOrComment) === -1 ? true : false;
}

形式变更：

isValidInput(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        if (!isNullOrUndefined(control.value)) {
            return isSecuredInput(control.value.toString()) ? null : { invalid: true};
        }
        return null;
    };
}

和形式将是

this.form = this.formBuilder.group({
        name:  new FormControl('', {
            validators: [Validators.required, this.isValidInput()],
            updateOn: 'change'
        })
})

源isSecure来自客户端的清理/重写HTML

Answer 4

尝试将Pattern用作

 this.form= this.fb.group({
        name: ['', [Validators.pattern('[a-zA-Z0-9 ]')]],
 });