angular內建的有表單驗證，直接上代碼：
<html> <head> <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/angular.js/1.3.17/angular.js"></script> <script type="text/javascript"> var app = angular.module('app', []); app.controller('Ctrl',function () { }) </script> </head><style type="text/css"> .error{color: indianred;} .success{color: green;}</style> <body ng-app='app'> <div ng-controller="Ctrl"> <form class="form-horizontal" name="form" role="form"> <div class="form-group"> <label for="user" class="col-sm-2 control-label">使用者名稱</label> <div class="col-sm-5"> <input type="text" ng-model="user.username" name="user" ng-pattern="/^[a-zA-Z]\w{2,10}[a-zA-Z\d]$/" class="form-control" required="required"> </div> <span class="col-sm-5" ng-show="form.user.$pristine">請輸入使用者名稱</span> <span class="col-sm-5 error" ng-show="form.user.$error.required && form.user.$dirty">使用者名稱不可為空</span> <span class="col-sm-5 error" ng-show="form.user.$invalid && form.user.$dirty && !form.user.$error.required ">使用者名稱不符合規則</span> <span class="col-sm-5 success" ng-show="form.user.$valid && form.user.$dirty">使用者名稱有效</span> </div> <button ng-disabled="form.$invalid">提交</button> </form> </div> </body></html>
1.未開始輸入時：
2.輸入不符合規則時：
3.輸入符合規則時：
總結方法有幾點：
1.在input上綁定指令ng-pattern ，裡面填入正則。
2.可以直接在input裡寫入require屬性，表示必須填入項。
3.定義不同的顯示狀態span，通過ng-show控制其顯示。
4.常用的兩個狀態，$invalid為無效，$valid為有效。
5.可以使用ng-disabled指令在表單驗證不通過的時候，禁用提交表單。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
