验证 angular 中的特殊字符
Validate special characters in angular
ngOnInit(): void {
this.customerForm = this.fb.group({
name: ['', Validators.required],
customer_id: ['', Validators.required],
})
}
我在 angular 中有这个表格组。所以这是一个包含名称和 customer_id 的表单。我需要的是我想验证名称 field.It 不应该接受任何特殊字符。如果可能,请在使用 toastr
时也提及
<td>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput placeholder="Name" formControlName="name" autocomplete="off" required>
</mat-form-field>
</td>
希望这对您有所帮助:
// Array of all special characters
var specialChars = /[!@#$%^&*()_+\-=\[\]{};':"\|,.<>\/?]/;
// Loop through array
for (let i = 0; i < specialChars.length; i++) {
// Checks if input contains current character
if (this.name.includes(specialChars[i])) {
// Your output
console.log("User input contained a special character");
break;
}
}
您可以创建一个自定义验证器以添加到您的表单“名称”,这样每次检查失败时表单都会 return 无效状态,这样您就可以在某处显示消息
export class CustomValidators {
nameValidator(control: FormControl): { [key: string]: boolean } {
const nameRegexp: RegExp = /[!@#$%^&*()_+\-=\[\]{};':"\|,.<>\/?]/;
if (control.value && nameRegexp.test(control.value)) {
return { invalidName: true };
}
}
}
现在将 CustomValidators 添加到组件构造函数中:
...
export class YourComponent implements OnInit {
constructor(private customValidators: CustomValidators) {
this.customerForm = this.fb.group({
name: ['', Validators.compose([Validators.required, this.customValidators.nameValidator])],
customer_id: ['', Validators.required],
});
}
}
然后可以在 mat-form-field
正下方的模板上向用户显示 mat-error
<td>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput placeholder="Name" formControlName="name" autocomplete="off" required>
</mat-form-field>
<mat-error *ngIf="form.controls['name'].hasError('invalidName')">
Special characters not allowed!
</mat-error>
</td>
您可以对 Validators.required built-in 执行类似的操作。
有关表单验证检查的更多信息this
ngOnInit(): void {
this.customerForm = this.fb.group({
name: ['', Validators.required],
customer_id: ['', Validators.required],
})
}
我在 angular 中有这个表格组。所以这是一个包含名称和 customer_id 的表单。我需要的是我想验证名称 field.It 不应该接受任何特殊字符。如果可能,请在使用 toastr
时也提及<td>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput placeholder="Name" formControlName="name" autocomplete="off" required>
</mat-form-field>
</td>
希望这对您有所帮助:
// Array of all special characters
var specialChars = /[!@#$%^&*()_+\-=\[\]{};':"\|,.<>\/?]/;
// Loop through array
for (let i = 0; i < specialChars.length; i++) {
// Checks if input contains current character
if (this.name.includes(specialChars[i])) {
// Your output
console.log("User input contained a special character");
break;
}
}
您可以创建一个自定义验证器以添加到您的表单“名称”,这样每次检查失败时表单都会 return 无效状态,这样您就可以在某处显示消息
export class CustomValidators {
nameValidator(control: FormControl): { [key: string]: boolean } {
const nameRegexp: RegExp = /[!@#$%^&*()_+\-=\[\]{};':"\|,.<>\/?]/;
if (control.value && nameRegexp.test(control.value)) {
return { invalidName: true };
}
}
}
现在将 CustomValidators 添加到组件构造函数中:
...
export class YourComponent implements OnInit {
constructor(private customValidators: CustomValidators) {
this.customerForm = this.fb.group({
name: ['', Validators.compose([Validators.required, this.customValidators.nameValidator])],
customer_id: ['', Validators.required],
});
}
}
然后可以在 mat-form-field
正下方的模板上向用户显示 mat-error<td>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput placeholder="Name" formControlName="name" autocomplete="off" required>
</mat-form-field>
<mat-error *ngIf="form.controls['name'].hasError('invalidName')">
Special characters not allowed!
</mat-error>
</td>
您可以对 Validators.required built-in 执行类似的操作。
有关表单验证检查的更多信息this