應用聲明，控制器

<form action="" method="post" id="myForm" name="logForm" ng-submit="submitForm(logForm.$valid)" ng-app="myApp" ng-controller="validateCtrl" novalidate> </form>

表單的數據綁定

<input name="name" id="vName" class="weui_input" type="text" placeholder="您要舉報的應用完整名稱" ng-model="formData.name" required>

單選數據綁定

<input type="radio" class="weui_check" name="bad_type" value="2" ng-model="formData.bad_type" required>

復選框數據綁定

<label>Favorite Colors</label><div class="form-group"><label class="checkbox-inline"><input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red</label><label class="checkbox-inline"><input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue</label><label class="checkbox-inline"><input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green</label></div>

打印數據
formData（在表單內打印有效）

表單驗證

<input type="button" id="cheForm" class="weui_btn weui_btn_primary" value="舉報" ng-show="logForm.$valid"/>

聲明表單

//anjularjs表單 var app = angular.module('myApp',[]); app.controller('validateCtrl', function($scope){//聲明formData$scope.formData={}; });

默認隱藏屬性顯示問題解：
html元素中：

ng-style="style" style="display:none;"

js文件：

//anjularjs表單 var app = angular.module('myApp',[]); app.controller('validateCtrl', function($scope){$scope.formData={};$scope.style="{display:none}";$(".weui_btn_primary").show(); });

基本上anjular.js表單驗證的實例都可以用這個做了，至于其他的可以去看下anjular.js的教程，最后再給大家推薦一個源碼網站，名字叫原創源碼庫，不錯的源碼發布站點，希望大家喜歡。

總結

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

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