AngularJs在单击提交后显示验证信息.

 1 <!DOCTYPE html>
 2 <html ng-app="app">
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript" src="js/angular-1.2.16.js" ></script>
 7     </head>
 8     <body>
 9         <form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
10             <p><input type="text" name="name" ng-model="signup.name" ng-minlength="3" ng-maxlength="20" required="required" /></p>
11             <div style="color: red;" ng-show="signup_form.name.$dirty&&signup_form.name.$invalid&&signup_form.submitted">
12                 <small ng-show="signup_form.name.$error.required">姓名是必填项</small>
13                 <small ng-show="signup_form.name.$error.minlength">姓名至少要3个字符</small>
14                 <small ng-show="signup_form.name.$error.maxlength">姓名最多20个字符</small>
15             </div>
16             <input type="submit" value="提交" />
17         </form>
18     </body>
19     <script type="text/javascript">
20     var app=angular.module("app",[]);
21         app.controller('signupController',function($scope){
22             $scope.submitted=false;
23             $scope.signupForm=function(){
24                 if($scope.signup_form.$valid){
25                     alert("验证通过");
26                 }else{
27                     $scope.signup_form.submitted=true;
28                 }
29             }
30         });
31     </script>
32 </html>
当点击提交呢按钮后就会出现提示信息.
运行结果: