通過angularJS 進行的表單驗證需要在表單中設置novalidate屬性

novalidate 屬性在應用中不是必須的，但是你需要在 AngularJS 表單中使用，用于重寫標準的 HTML5 驗證。

進行表單驗證和驗證規(guī)則前需要給form、和input設置name屬性，為了驗證時獲取到驗證的標簽

驗證規(guī)則：都是boolean

（具體驗證規(guī)則可以用正則表達式寫 在input添加ng-pattern屬性）

$dirty：表單有填寫記錄，是否修改

$valid：填寫的字段是合法的，通過驗證

$invalid：填寫的是不合法的，未通過

$pristine：表單沒有內容,沒有被修改

$submitted：是否提交過

例如：

<form? ng-app="myApp"? ng-controller="validateCtrl"
name="myForm" novalidate>

<p>郵箱：
? <input type="email" name="email" ng-model="email" required>
? <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
? <span ng-show="myForm.email.$error.required">郵箱是必須的。</span>
? <span ng-show="myForm.email.$error.email">非法的郵箱。</span>
? </span>
</p>

</form>

$error對象：當驗證不通過時產生，包含了所有未通過驗證的規(guī)則

有email-pattern-url-time-required-date-week等

$untouched?? boolean? 是否從未被點擊/觸摸過?? ?
$touched? boolean?? ?是否失去過焦點
$pristine? boolean?? ?是否從未被修改過
$dirty? boolean? 是否被修改過
$valid?? boolean?? 是否所有的驗證都驗證通過
$invalid??? boolean?? ?是否驗證未通過
$name? string? 表單元素name屬性的值

?

轉載于:https://www.cnblogs.com/dyc-yoko/p/6265096.html

總結

以上是生活随笔為你收集整理的angularJS 表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。