angularjs表单验正

  1.  formname.inputname.$pristine  表单未修改， 返回为true

  2.  formname.inputname.$dirry    表单修改 ，返回true

  3.  formName.inpuname.$valid      合法表单，符合你对它设置的验证规则， 返回true

  4.  formname.inputname.$invalid   不合法表单返回true

  5.   formname.inputname.$error    验证失败这个属性是true  ，验证成功是false

  6.表单验证案列   

   index.html

 1 <!doctype html>
 2 <html >
 3 <head>
 4     <meta charset="utf-8">
 5 </head>
 6 <style>
 7     /*input.ng-invalid {
 8         border: 1px solid red;  //输入不合法的时候
 9     }
10     input.ng-valid {
11         border: 1px solid green;   //输入合法的时候
12     }*/
13 </style>
14 <script src="js/angular-1.3.0.js"></script>
15 <script src="js/clock.js"></script>
16 <body ng-app="myApp">
17 <form name="form1" novalidate ng-submit="signupForm();" ng-controller="signupController">
18     <fieldset>
19         <legend>Signup</legend>
20         <div class="row">
21             <div class="large-12 columns">
22                 <label>Your name</label>
23                 <input type="text" placeholder="Name" ensure-unique="username" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required>
24                 <div class="error" ng-show="form1.name.$dirty&&form1.name.$invalid&&submitted">
25                     <small class="error" ng-show="form1.name.$error.required">
26                         Your name is required。
27                     </small>
28                     <small class="error" ng-show="form1.name.$error.minlength">
29                         Your name is required to be at least 3 characters.
30                     </small>
31                     <small class="error" ng-show="form1.name.$error.maxlength">
32                         Your name cannot be longer than 20 characters.
33                     </small>
34                     <small class="error" ng-show="form1.username.$error.unique">
35                         That username is taken, please try another
36                     </small>
37                 </div>
38             </div>
39         </div>
40         <div class="row">
41             <div class="large-12 columns">
42                 <label>Your email</label>
43                 <input type="email" name="email" ng-model="signup.email" ng-minlength="3" ng-maxlength="20" required placeholder="email">
44                 <div class="error" ng-show="form1.email.$dirty&&form1.email.$invalid&&submitted">
45                     <small class="error" ng-show="form1.email.$error.required">
46                         Your email is required.
47                     </small>
48                     <small class="error" ng-show="form1.email.$error.email">
49                         This is not a email.
50                     </small>
51                     <small class="error" ng-show="form1.email.$error.minlength">
52                         Your email is required to be at least 3 characters.
53                     </small>
54                     <small class="error" ng-show="form1.email.$error.maxlength">
55                         Your email cannot be longer than 20 characters.
56                     </small>
57                 </div>
58             </div>
59         </div>
60         <button type="submit" >Submit</button>
61     </fieldset>
62 </form>
63 </body>
64 </html>

     clock.js

var app = angular.module('myApp', []);
app.controller('signupController',function($scope){
    $scope.submitted=false;
    $scope.signupForm=function(){
        if($scope.form1.$valid){
        }else{
            $scope.submitted=true;
        }
    }
})

 

 

   

posted on 2016-11-16 16:17  ShamSilence  阅读(150)  评论(0)  编辑  收藏  举报

导航