AngularJS實現(xiàn)表單驗證功能詳解

更新時間：2017年10月12日 11:58:39 作者：chengzhang_jian

這篇文章主要為大家詳細(xì)介紹了AngularJS實現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在ng中，針對表單和空間提供了屬性，用于驗證控件交互的狀態(tài)

布爾類型：

ng-valid 表單通過驗證時設(shè)置
ng-invalid 表單未通過驗證時設(shè)置
ng-pristine 表單沒有改動時設(shè)置
ng-dirty 表單有改動時設(shè)置

對象：

$error

注意事項：

①給表單以及表單組件加上name屬性
②給需要用到的表單組件，加上ngModel
③屬性的用法
myForm.t_age.dirty/pristine/valid/invalid/$error

案例如下

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="js/angular.js"></script>
</head>
<body>

<div ng-controller="myCtrl">
 <form name="myForm" ng-submit="submitInfo()">
 <input type="text" name="t_name"
   ng-model="userName" required/>
 <span ng-show="myForm.t_name.$error.required">
  姓名不能為空
 </span>
 <br/>
 <input type="text" name="t_age"
   ng-model="userAge" required/>
 <span ng-show="myForm.t_age.$invalid">驗證失敗</span>
 <span ng-show="myForm.t_age.$pristine">沒有輸入過</span>

 <br/>
 <input
  ng-disabled="myForm.$invalid"
  type="submit" value="提交"/>
 </form>
</div>

<script>
 var app = angular.module('myApp', ['ng']);

 app.controller('myCtrl', function ($scope) {
 $scope.submitInfo = function () {
  console.log($scope.userName,$scope.userAge);
 }
 });
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

對angularJs中自定義指令replace的屬性詳解
今天小編就為大家分享一篇對angularJs中自定義指令replace的屬性詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
淺談angular懶加載的一些坑
下面小編就為大家?guī)硪黄獪\談angular懶加載的一些坑。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
淺談AngularJS中使用$resource（已更新）
這篇文章主要介紹了淺談AngularJS中使用$resource（已更新）的相關(guān)資料,需要的朋友可以參考下
2017-09-09
AngularJS equal比較對象實例詳解
這篇文章主要介紹了AngularJS API之equal比較對象的相關(guān)資料,需要的朋友可以參考下
2016-09-09
利用require.js與angular搭建spa應(yīng)用的方法實例
這篇文章主要給大家介紹了關(guān)于利用require.js與angular搭建spa應(yīng)用的方法實例，文中通過示例代碼給大家介紹的非常詳細(xì)，對大家的理解和學(xué)習(xí)具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。
2017-07-07
angular異步驗證防抖踩坑實錄
這篇文章主要給大家介紹了關(guān)于angular異步驗證防抖踩坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
解決angularjs前后端分離調(diào)用接口傳遞中文時中文亂碼的問題
今天小編就為大家分享一篇解決angularjs前后端分離調(diào)用接口傳遞中文時中文亂碼的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Angular 4.X開發(fā)實踐中的踩坑小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 4.X開發(fā)實踐中的一些踩坑經(jīng)驗，文中主要介紹的是使用ngIf或者ngSwitch出錯以及多級依賴注入器的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
angularjs1.X 重構(gòu)controller 的方法小結(jié)
這篇文章主要介紹了angularjs1.X 重構(gòu)controller 的方法小結(jié)，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-08-08
簡述AngularJS的控制器的使用
這篇文章主要介紹了AngularJS的控制器的使用,文中給出了具體的用于HTML中的對象示例,需要的朋友可以參考下
2015-06-06