angular js 表单验证

  1 <!doctype html>
  2 <html ng-app="myapp">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         body{
  8             padding: 50px;
  9             font-family: "微软雅黑";
 10         }
 11         input{
 12             margin-bottom: 20px;
 13             padding-left: 5PX;
 14             width: 300px;
 15             height: 30px;
 16             background:#fff;
 17             border: 1px solid#ccc;
 18             border-radius: 3px;
 19             webkit-transition: all .8s;
 20             -moz-transition: all .8s;
 21             -o-transition: all .8s;
 22             transition: all .8s;
 23         }
 24         input:focus {
 25             border: 1px solid #6eb932;
 26             outline: none;
 27             webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
 28             -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
 29             box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
 30             webkit-transition: all .8s;
 31             -moz-transition: all .8s;
 32             -o-transition: all .8s;
 33             transition: all .8s;
 34         }
 35         button{
 36             width: 100px;
 37             height: 50px;
 38             background: #6eb932;
 39             color:#fff;
 40             font-size: 16px;
 41             outline: none;
 42             border: none;
 43             border-radius: 3px;
 44         }
 45         .txt{
 46             font-size: 16px;
 47             display: inline-block;
 48             width: 120px;
 49         }
 50         .error {
 51             color: red;
 52             font-size: 12px;
 53             padding-left: 5px;
 54         }
 55         .succese {
 56             color: #999;
 57             font-size: 12px;
 58             padding-left: 5px;
 59         }
 60     </style>
 61     <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
 62     <script type="text/javascript" src="angular.min.js"></script>
 63     <script>
 64         var myapp=angular.module("myapp",[])
 65         .controller(‘myCtrl‘, [‘$scope‘, function ($scope) {
 66
 67         }])
 68     </script>
 69 </head>
 70 <body ng-controller="myCtrl">
 71     <form class="mation"  method="POST" name="myForm">
 72         <label>
 73             <span class="txt">&nbsp; &nbsp; 姓名：</span><input type="text" id="user" name="user" value="" ng-model="data.name" placeholder="请输入姓名" ng-minlength="2" ng-maxlength="8">
 74             <span class="error" ng-show="myForm.user.$error.minlength">姓名不能低于两位</span>
 75             <span class="error" ng-show="myForm.user.$error.maxlength">姓名不能多于八位</span>
 76         </label><br>
 77         <label>
 78             <span class="txt">用户名：</span><input type="text" name="username" ng-model="data.user" placeholder="不能超过10个字"  ng-minlength="2"
 79             ng-maxlength="10" required/>
 80             <span class="error" class="error" ng-show="myForm.username.$error.minlength">
 81                 用户名不能低于两个字
 82             </span>
 83             <span class="error" class="error" ng-show="myForm.username.$error.maxlength">
 84                 用户名不能超过10个字
 85             </span>
 86         </label><br>
 87         <label>
 88             <span class="txt">手机号：</span><input type="text" name="tel" placeholder="请输入手机号" ng-pattern="/^1[34578]\d{9}$/" ng-model="data.tel">
 89             <!-- /^1\d{10}$/; -->
 90             <span class="succese" ng-show="myForm.tel.$dirty && myForm.tel.$valid">手机号验证成功</span>
 91             <span class="error" ng-show="myForm.tel.$dirty && myForm.tel.$invalid">请输入正确手机号</span>
 92         </label><br>
 93         <label>
 94             <span class="txt">&nbsp; &nbsp; 邮箱：</span><input type="email" name="email" placeholder="请输入邮箱" ng-model="data.email">
 95             <span class="error" ng-show="myForm.email.$dirty && myForm.email.$invalid">邮箱格式错误</span>
 96             <span class="succese" ng-show="myForm.email.$dirty && myForm.email.$valid">邮箱验证成功</span>
 97         </label><br>
 98         <label>
 99             <span class="txt">旧密码：</span><input type="password" id="password" value="" placeholder="请输入用户原始密码">
100         </label><br>
101         <label>
102             <span class="txt">新密码：</span><input type="password" id="password1" name="password1" ng-model="password1" value="" placeholder="请输入新密码">
103         </label><br>
104         <label>
105             <span class="txt">确认密码：</span><input type="password" id="password2" name="password2" ng-model="password2" value="" placeholder="请确认新密码">
106             <span class="error" ng-show="myForm.password2.$dirty && myForm.password1.$dirty && password1!=password2">两次密码输入不一致</span>
107             <span class="succese" ng-show="myForm.password2.$dirty && password1==password2">密码校验成功</span>
108         </label><br>
109         <button type="submit" id="submit" ng-disabled="myForm.$invalid || password1!=password2">提交表格</button>
110     </form>
111 </body>
112 </html>