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>
当点击提交呢按钮后就会出现提示信息.
运行结果:
