广告合作QQ：76874919

AngularJS使用ngMessages进行表单验证

JavaScript 2019-01-03

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

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

required">Your username is required.

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

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

用户名最小长度5

用户名最大长度10

required">用户名必填

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

<Meta charset="UTF-8"> body{ padding-top: 50px; }
用户名
用户名最小长度5

用户名最大长度10

required">用户名必填

邮箱

<div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<div ng-messages-include="emailmessages.html">

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