ng-Message表单验证(一)
2016-06-08 本文已影响0人
遥望泰山
- angular-messages进行安装
- 引用：angular-messages.js
- 依赖：angular.module(‘app‘,[‘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>验证实例</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">必填项</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于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">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>
