AngularJS - 表单校验信息提示

准备工作

<script type="text/javascript" src="bower_components/angular-messages/angular-messages.js">

angular.module('myApp', ['ngMessages']);

Example

<form name="signup_form" novalidate ng-submit="signupForm()"
ng-controller="signupController">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=
3 ng-maxlength=20 required />
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">Make sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>
</div>
<button type="submit">Submit</button>
</form>

引入提示消息模板

<div class+'error' ng-messages="signup_form.name.$error"
ng-messages-include="templates/errors.html">
</div>