angularjs--表单验证

angularjs--表单验证

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 6     <title>index</title>
 7     <link href="{$Think.const.CSSURL}bootstrap.min.css" rel="stylesheet" type="text/css"/>
 8     <script src="{$Think.const.JS}jquery.min.js" type="text/javascript"></script>
 9     <script src="{$Think.const.JS}bootstrap.min.js" type="text/javascript"></script>
10     <script src="{$Think.const.JS}angular.min.js" type="text/javascript"></script>
11     <link href="{$Think.const.CSSURL}home/index.css" rel="stylesheet" type="text/css"/>
12 </head>
13 <body ng-app="myapp" ng-controller="myctrl">
14 <div class="container">
15     <h1 class="page-header">前端技术</h1>
16 
17     <form name="myform" action="" novalidate>
18         <div class="form-group">
19             <label for="">用户名:</label>
20             <input type="text" class="form-control" ng-model="user" name="user" required>
21             <div class="alert alert-danger" ng-show="myform.user.$dirty && myform.user.$invalid">
22                 <span>用户名不能为空</span>
23             </div>
24         </div>
25         <div class="form-group">
26             <label for="">密码:</label>
27             <input type="text" class="form-control" name="pass" ng-model="pass" required>
28             <div class="alert alert-danger" ng-show="myform.pass.$dirty && myform.pass.$invalid">
29                 <span>密码不能为空</span>
30             </div>
31         </div>
32         <div class="form-group">
33             <label for="">邮箱:</label>
34             <input type="email" class="form-control" name="email" ng-model="email" required>
35             <div class="alert alert-danger" ng-show="myform.email.$dirty && myform.email.$invalid">
36                 <span ng-show="myform.email.$error.required">邮箱不能为空</span>
37                 <span ng-show="myform.email.$error.email">邮箱格式有误</span>
38             </div>
39         </div>
40         <div class="form-group">
41             <input type="submit" class="btn btn-primary btn-lg" value="ok"
42                    ng-disabled="myform.user.$dirty && myform.user.$invalid ||
43                    myform.pass.$dirty && myform.pass.$invalid ||
44                    myform.email.$dirty && myform.email.$invalid">
45         </div>
46     </form>
47 
48     <img src="{$Think.const.HOMEIMG}/01.png" />
49 </div>
50 </body>
51 <script>
52     app = angular.module("myapp",[]);
53     app.controller("myctrl",function($scope){
54         $scope.user = "admin";
55         $scope.pass = "007";
56         $scope.email = "admin@163.com";
57     });
58 </script>
59 </html>
posted @ 2017-02-04 01:42  yuge790615  阅读(130)  评论(0)  编辑  收藏  举报