標籤：utf-8 body style name on() pre meta nova har
index.html
1 <!doctype html> 2 <html > 3 <head> 4 <meta charset="utf-8"> 5 </head> 6 <style> 7 /*input.ng-invalid { 8 border: 1px solid red; 9 }10 input.ng-valid {11 border: 1px solid green;12 }*/13 </style>14 <script src="js/angular.js"></script>15 <script src="js/clock.js"></script>16 <script src="js/angular-messages.js"></script>17 <script src="js/angular-messages.min.js"></script>18 <body ng-app="myApp">19 <form name="form1" novalidate ng-submit="signupForm()" ng-controller="signupController">20 <label>Your name</label>21 <input type="text" placeholder="Name" ng-model="name" name="name" ng-minlength="3"22 ng-maxlength="20" required >23 <div class="error" ng-messages="form1.name.$error" >24 <my-error></my-error>
25 </div>26 <button type="submit">Submit</button>27 </form>28 </body>29 </html>
clock.js
1 var app=angular.module(‘myApp‘,[‘ngMessages‘]);2 app.directive(‘myError‘,function(){3 return{4 restrict:‘EAC‘,
5 template:‘<div ng-message="required">請輸入使用者名稱 </div> <div ng-message="minlength">少於3位</div> <div ng-message="maxlength">多餘20位</div>‘6 }7 })
E代表元素 A代表屬性 C代表類 M代表注釋
<my-error></my-error> 可以換成<div my-error></div>
angularjs 表單驗證ngMessages和建立自訂指令結合
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
