本篇文章為大家展示了怎么在ionic中使用angularjs實(shí)現(xiàn)表單驗(yàn)證，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)的團(tuán)隊(duì)成員不追求數(shù)量、追求質(zhì)量。我們經(jīng)驗(yàn)豐富并且專業(yè)，我們之間合作時(shí)就好像一個(gè)人，協(xié)同一致毫無保留。創(chuàng)新互聯(lián)珍視想法，同時(shí)也看重過程轉(zhuǎn)化帶來的沖擊力和影響力，在我們眼中，任何細(xì)節(jié)都不容小覷。一直致力于為企業(yè)提供從域名與空間、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、商城系統(tǒng)網(wǎng)站開發(fā)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個(gè)性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。

需引入angular forms庫，因?yàn)閕onic會(huì)自動(dòng)默認(rèn)引入。

 
 
  
  

  
  
ahdasidhasidashdudi

  
  
  

  
  記住密碼
  
  

  登錄
  
  
   去注冊
  

  
   忘記密碼
  
  
  {{promptMessage}}
  用戶名必須為6到10位
  
  密碼必須為6-16位
  
 


 

運(yùn)行效果如下：

3核心屬性

可以看到[(ngModel)]="user.username"作用是綁定了我們在ts文件中定義的變量。

#username="ngModel"的作用是把我們綁定的模型值命名成username，變成了一個(gè)FormControl對象，這里不必糾結(jié)下節(jié)會(huì)講。

required 驗(yàn)證是否為空 maxlength="10" 最大長度 minlength="6"最小長度。這些都是我們需要驗(yàn)證的條件。

*ngIf="username.invalid && (username.dirty || username.touched)"

*ngIf標(biāo)簽等于true時(shí)將錯(cuò)誤信息顯示出來username.invalid表示驗(yàn)證不合法返回true，username.dirty 判斷是否改變了這個(gè)參數(shù)的值，username.touched表示是否有碰過表單，作用在于，剛打開表單頁面是，里面參數(shù)都是空的，但無需顯示錯(cuò)誤信息。

進(jìn)入model.d.ts文件看到部分源碼如下

/**
  * A control is `valid` when its `status === VALID`.
  *
  * In order to have this status, the control must have passed all its
  * validation checks.
  */
 readonly valid: boolean;
 /**
  * A control is `invalid` when its `status === INVALID`.
  *
  * In order to have this status, the control must have failed
  * at least one of its validation checks.
  */
 readonly invalid: boolean;

valid屬性表示參數(shù)值校驗(yàn)后結(jié)果不通過為false，通過為true。

invalid則表示參數(shù)值校驗(yàn)不通過為true，通過為false。

 /**
  * A control is `dirty` if the user has changed the value
  * in the UI.
  *
  * Note that programmatic changes to a control's value will
  * *not* mark it dirty.
  */
 readonly dirty: boolean;
 /**
 * A control is marked `touched` once the user has triggered
 * a `blur` event on it.
  */
 readonly touched: boolean;

上述內(nèi)容就是怎么在ionic中使用angularjs實(shí)現(xiàn)表單驗(yàn)證，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。