資源地址

環境準備

• 1、安裝npm包 npm install great-ngform --save
• 2、引入module

import {GreatValidateModule} from "great-ngform";
@NgModule({
  imports: [
    CommonModule,
    GreatValidateModule,
    FormsModule
  ]
})

校驗方式

• 1、驗證位元組長度

例如資料庫定義的長度為varchar2(20)，但是介面上可以輸入漢字、數字等，所以最多隻能輸入10個漢字，但是漢字、數字混合輸入的時候，如何更好的校驗

<!-- 只需要在input標籤上新增greatByteLength="20"即可 -->
<input name="byteLength" #byteLengthBox="ngModel" [(ngModel)]="byteLength" greatByteLength>
<!-- 顯示錯誤資訊 -->
<div *ngIf="***">
  {{byteLengthBox.errors.byteLength.errorMsg}}
</div>
<!-- 錯誤資訊內容：長度不能超過20位元組，已超出長度為：2 -->
 

• 2、驗證手機號

<!-- 只需要在input標籤上新增greatMobile即可 -->
<input name="mobile" #mobileBox="ngModel" [(ngModel)]="mobile" greatMobile>
<!-- 顯示錯誤資訊 -->
<div *ngIf="***">
  {{mobileBox.errors.mobile.errorMsg}}
</div>
<!-- 錯誤資訊內容：手機號格式有誤 -->

• 3、URL

<!-- 只需要在input標籤上新增greatUrl即可 -->
<input name="url" #urlBox="ngModel" [(ngModel)]="url" greatUrl>
<!-- 顯示錯誤資訊 -->
<div *ngIf="***">
  {{urlBox.errors.url.errorMsg}}
</div>
<!-- 錯誤資訊內容：手機號格式有誤 -->
 

• 4、驗證mac地址

<!-- 只需要在input標籤上新增greatMac即可 -->
<input name="mac" #macBox="ngModel" [(ngModel)]="mac" greatMac>
<!-- 顯示錯誤資訊 -->
<div *ngIf="***">
  {{macBox.errors.mac.errorMsg}}
</div>
<!-- 錯誤資訊內容：mac地址格式有誤 -->