AngularJS使用ngMessages进行表单验证_AngularJS

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

名称为"ngMessages"的module，通过npm install angular-messages进行安装。在没有使用ngMessages之前，我们可能这样写验证：

<form name="userForm">
<input 
type="text" 
name="username" 
ng-model="user.username" 
ng-minlength="3" 
ng-maxlength="8"
required>
<p ng-show="userForm.username.$error.minlength">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength">Username is too long.</p>
<p ng-show="userForm.username.$error.required">Your username is required.</p>
</form>

以上，列举了每种可能的验证失败，并且手工编写是否显示错误提示信息。

有了"ngMessages"这个module,大致这么写：

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>

ngMessages为我们自动判断显示哪种错误。

使用ngMessages的几个关键点：

● npm install angular-messages
● 引用：angular-messages.js
● 依赖：angular.module('app',['ngMessages'])

这里有一个简单的Demo,文件结构：

node_modules/
app.js
emailmessages.html
index.html

安装如下：

npm install bootstrap
npm install angular
npm install angular-messages

==index.html

用户名

<div class="help-block" ng-messages="userForm.name.$error" ng-if="userForm.name.$touched">
<p ng-message="minlength">用户名最小长度5</p>
<p ng-message="maxlength">用户名最大长度10</p>
<p ng-message="required">用户名必填</p>
</div>


邮箱







提交

{{userForm.name.$error}}
{{userForm.email.$error}}