- angular-messages進(jìn)行安裝
- 引用：angular-messages.js
- 依賴：angular.module(‘a(chǎn)pp‘,[‘ngMessages‘])
index.html中
<html>
<head>
<meta charset="UTF-8">
<title>Angular JS Forms</title>
<script src="angular/angular.min.js"></script>
<script src = bower-angular-messages-master/bower-angular-messages-master/angular-messages.min.js></script>
</head>
<body>
<h2>驗(yàn)證實(shí)例</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>用戶名<br>
<input type="text" name="user" ng-minlength="3" ng-maxlength="10" ng-model="user" required/>
<!--<span style="color:red" ng-show="myForm.user.$dirty&&myForm.user.$invalid">-->
<!--<span ng-show="myForm.user.$error.required">用戶名是必須的</span>-->
<div ng-messages="myForm.user.$error" ng-if="myForm.user.$dirty">
<div ng-message="required">必填項(xiàng)</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太長(zhǎng)大于20</div>
<div ng-include="'error.html'"></div> //也可以這樣用
</div>
</form>
<script>
var app = angular.module('myApp', ['ngMessages']);
app.controller('validateCtrl', function($scope) {
$scope.user = '';
});
</script>
</body>
</html>
在error.html中
<div ng-message="required">必填項(xiàng)</div>
<div ng-message="email">郵件格式不對(duì)</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太長(zhǎng)大于20</div>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
