如何使用角度验证自定义验证模式中的文本

Posted 2023-03-13

【中文标题】如何使用角度验证自定义验证模式中的文本

【英文标题】：how to validate text in custom validate patterns using angular

【发布时间】：2019-03-30 20:05:01

【问题描述】：

我想仅使用此模式~*\|:"<>?/ 验证文本。下面是我的文本框

<input type="text" [(ngModel)] ="newReferenceValue"  #referencevar="ngModel" name="referencevar" (keyup.enter)="save()" pattern='^[^`~!@#$%\^&*()_+=|[\]\\:"]*$' style="margin: 8px;width: 60%;">

 <div *ngIf="referencevar.errors?.pattern">
         not valid not partens  
  </div>

【问题讨论】：

您尝试过 ng 表单吗？

不，我只尝试两种方式绑定。错误消息显示但我不能只验证这个 ~*\|:"?/ text

我想创建正确的正则表达式模式='^[^`~!@#$%\^&*()_+=|[]\\:"]*$'

尝试 Angular 表单或 ngforms，这样它就可以作为 html 验证

【参考方案1】：

你用这种方式

html

<input type="text" [(ngModel)] ="newReferenceValue"  #referencevar="ngModel" name="referencevar" (keyup.enter)="save()" [pattern]="pattern" style="margin: 8px;width: 60%;">

 <div *ngIf="referencevar.errors?.pattern">
         not valid not partens  
  </div>

ts

pattern = '^[^`~!@#$%\^&*()_+=|[\]\\:"]*$';

但是，使用模式的最佳方式是使用反应形式， 您可以参考此link 以获得更多了解。

【讨论】：

我只想验证这个 ~*\|:"?/ .如何只验证这个？

你可以使用这个正则表达式'^[~*\|:"<>?/]*$'

您遇到的错误是什么？不工作是什么意思？

【参考方案2】：

这是一个可以帮助您的示例，如果您有任何疑问，请在 cmets 中询问我

    <form role="form" name="form" (ngSubmit)="f.form.valid" #f="ngForm" novalidate>

    <input type="text" id="newReferenceValue" name="newReferenceValue" [(ngModel)] ="newReferenceValue"  #referencevar="ngModel" pattern="^[^`~!@#$%\^&*()_+=|[\]\\:"]*$" (keyup.enter)="save()" [ngClass]=" 'is-invalid': f.submitted && referencevar.invalid " style="margin: 8px;width: 60%;">

<div *ngIf="f.submitted && referencevar.invalid" class="invalid-feedback">

 <div *ngIf="referencevar.errors.pattern" class="error"> not valid not partens</div>
                                                                     </div>

    </form>

【讨论】：

我不习惯检查所有模式="^[^`~!@#$%\^&*()_+=|[]\\:"]*$ " 我只想检查 ~*\|:"?/

你能举个例子吗？

【参考方案3】：

我正在使用这个正则表达式模式^[^~*\\|>:"?</"]*$ 工作正常

<input type="text" [(ngModel)] ="newReferenceValue"  #referencevar="ngModel" name="referencevar"  maxlength="textLengthValue" (keyup.enter)="save()" pattern='^[^~*\\|>:"?</"]*$' style="margin: 8px;width: 60%;">
 <div *ngIf="referencevar.errors?.pattern">
 Using ~*\|:"<>?/ reference value not applicabale  
 </div>