AngulairJS表單輸入驗證與mvc

標籤：model   程式   html   工作原理   $scope   多個   視圖   mail   儲存   

AngulairJS表單輸入驗證

1.表單中，常用的驗證操作有：$dirty 表單有填寫記錄、$valid 欄位內容合法的、$invalid 欄位內容是非法的、$pristine 表單沒有填寫記錄、$error    表單驗證不通過的錯誤驗證資訊.

2.驗證時，需給表單及需要驗證的input設定name屬性

給form和input設定name後，會將form表單資訊，預設綁定到$scope範圍中。故，可以使用formName.inputname.$驗證操作得到驗證結果

例如：formName.inputName.$dirty="true"表單被填過

       formName.inputName.$valid="true"表單輸入不合法

       formName.inputName.$error.required="true"表單必填但未填

       $error支援的驗證required/minlength/maxlength/pattern/email/number/date/url等

3.為避免衝突，例如使用type="email"  時，H5也會進行驗證操作。如果只想使用AngulaiJS驗證，3.為避免衝突，例如使用type="email"  s時，H5也會進行驗證操作。如果只想使用AngulaiJS驗證。

  總體流程是，先布局，再給input設定name等屬性，在提示位置加入ng-show等屬性達到想要的效果。

AngularJS中的mvc

model(模型)：應用程式中用於處理資料的部分。（儲存或修改資料到資料庫的，變數等）。AngularJS中的model特指的是資料：資料
view(視圖)：使用者看到的用於顯示資料的頁面

工作原理：使用者從視圖層發出請求，controller接收到請求後轉寄給model處理，model處理完後返回後給controller,並在view層
反饋給使用者。

具體流程是：

建立一個angular模組，即ng-app所綁定部分,需傳遞兩個參數：

①模組名稱，即ng-app所需要綁定的名稱。ng-app="myapp"

②數組：需要注入的模組名稱，不要可為空白

在angular模組上，建立一個控制器controller,需要傳遞兩個參數
①controller名稱即ng-controller所需要綁定的名稱。ng-controller="mycontroller"
②controller的建構函式。建構函式可以傳入多個參數，包括$scope/$rootScope以及各種系統內建對象；


 [AngularJS中的範圍]
①$scope:局部範圍，聲明在$scope上的屬性和方法只能在當前controller中使用；
②$rootScope:根範圍，聲明在$rootscope上的屬性和方法可以在ng-app所包含的任何部分使用（無論是否同一個cntroller或是否在
controller包含範圍中
若沒有使用$scope聲明變數而直接在html中使用ng-model變數的範圍為
1如果ng-model在某個ng-controller中則此變數會預設綁定到大跟前controller 的$sope上
2.如果bg-model沒有任何一個ng-controller中，則此變數綁定在$rootscope上；

 

AngulairJS表單輸入驗證與mvc