AngularJS系列(十)——表单的重置和验证

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/luo4105/article/details/77897260

表单重置

表单重置实例

<div ng-app="myApp"ng-controller="formCtrl">
 <form novalidate>
   First Name:<br>
   <input ng-model="user.firstName" /><br>
   Last Name:<br>
   <input ng-model="user.lastName" />
   <br><br>
           <button ng-click="rest()">重置</button>
 </form>
 <p>form = {{user }}</p>
 <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope){
   $scope.master = {firstName:"John", lastName:"Doe"};
   $scope.rest = function (){
                   $scope.user= angular.copy($scope.master);
         }
         $scope.rest();
});
</script>

表单验证

AngularJS表单的内置验证

表单的状态有

下面是表单验证提示和是否能提交的例子

<form ng-app="myApp"ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名:<br>
<input type="text"name="user" ng-model="user" requiredng-minlength="3" ng-maxlength="8">
<spanng-hide="myForm.user.$valid" style="color:red">
         <spanng-show="myForm.user.$error.required">用户名是必须的。</span>
         <spanng-show="myForm.user.$error.minlength">合法输入必须不小于3字符</span>
         <spanng-show="myForm.user.$error.maxlength">合法输入必须不大于8字符</span>
</span>  
</p>
<p>邮箱:<br>
<input type="email"name="email" ng-model="email" required>
<span ng-hide="myForm.email.$valid"style="color:red">
         <spanng-show="myForm.email.$error.repuired">邮箱地址是必须的</span>
         <spanng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>
<p>
<input type="submit"ng-disabled="myForm.$invalid" />
</p>
</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl',function($scope) {
   $scope.user = 'John Doe';
   $scope.email = '[email protected]';
});
</script>

实例解析

1.      表单验证表达式必须从表单开始，即myForm.user.$valid而不能是user.$valid。

2.      表单验证不通过可以通过myForm.email.$error.xxx得到是什么原因不通过

3.      ng-disabled="myForm.$invalid"作用是表单验证不通过时，提交按钮不可用