AngularJS使用ngMessages进行表单验证

更新时间：2015年12月27日 12:22:10 作者：Darren Ji

这篇文章主要介绍了AngularJS使用ngMessages进行表单验证的相关资料,需要的朋友可以参考下

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<style>
body{
padding-top: 50px;
}
</style>
</head>
<body class="container" ng-app="app" ng-controller="MainCtrl as main">
<form name="userForm" novalidate>
<div class="form-group" ng-class="{'has-error':userForm.name.$touched && userForm.name.$invalid}">
<label>用户名</label>
<input type="text" name="name" class="form-control"
ng-model="main.name"
ng-minlength="5"
ng-maxlength="10" required/>
<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>
</div>
<div class="form-group" ng-class="{'has-error':userForm.email.$touched && userForm.email.$invalid}">
<label>邮箱</label>
<input type="email" name="email" class="form-control"
ng-model="main.email"
ng-minlength="5"
ng-maxlength="20" required/>

<div class="help-block" ng-messages="userForm.email.$error" ng-if="userForm.email.$touched">
<div ng-messages-include="emailmessages.html"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">提交</button>
</div>
<pre>{{userForm.name.$error}}</pre>
<pre>{{userForm.email.$error}}</pre>
</form>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-messages/angular-messages.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}

emailmessages.html

把有关email的表单验证放在这里，通过<div ng-messages-include="emailmessages.html"></div>显示到页面某个位置上。

<p ng-message="required">邮箱必填</p>
<p ng-message="minlength">邮箱长度太短</p>
<p ng-message="maxlength">邮箱长度太长</p>
<p ng-message="email">邮箱无效</p>

ps：常用的表单验证指令

1. 必填项验证

某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

复制代码代码如下:

2. 最小长度

验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：

复制代码代码如下:

3. 最大长度

验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

复制代码代码如下:

4. 模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

复制代码代码如下:

5. 电子邮件

验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

复制代码代码如下:

6. 数字

验证输入内容是否是数字，将input的类型设置为number：

复制代码代码如下:

7. URL

验证输入内容是否是URL，将input的类型设置为 url：

复制代码代码如下:

您可能感兴趣的文章:

AngularJs基于角色的前端访问控制的实现
本篇文章主要介绍了AngularJs实现基于角色的前端访问控制，可以适用于不同的角色，有需要的可以了解一下。
2016-11-11
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
这篇文章主要介绍了angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
angularjs基础教程
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
2014-12-12
AngularJS中controller控制器继承的使用方法
这篇文章主要介绍了AngularJS中controller控制器继承的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
详解angular中的作用域及继承
本篇文章主要介绍了详解angular中的作用域及继承，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
AngularJS 模块化详解及实例代码
这篇文章主要介绍了AngularJS 模块化，这里整理了详细的资料及简单实例代码，实现效果图，有需要的小伙伴可以参考下
2016-09-09
AngularJS的依赖注入实例分析(使用module和injector)
这篇文章主要介绍了AngularJS的依赖注入,结合实例形式分析了依赖注入的原理及使用module和injector实现依赖注入的步骤与操作技巧,需要的朋友可以参考下
2017-01-01
AngularJs定时器$interval 和 $timeout详解
这篇文章主要介绍了AngularJs定时器$interval 和 $timeout详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
angular 组件通信的几种实现方式
这篇文章主要介绍了angular 组件通信的几种实现方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Angular实现可删除并计算总金额的购物车功能示例
这篇文章主要介绍了Angular实现可删除并计算总金额的购物车功能,涉及AngularJS事件响应、元素遍历与数值运算等相关操作技巧,需要的朋友可以参考下
2017-12-12