AngularJS使用ngMessages进行表单验证


Posted in Javascript onDecember 27, 2015

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即可:

<input type="text" required />

2. 最小长度

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

<input type="text" ng-minlength="5" />

3. 最大长度

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

<input type="text" ng-maxlength="20" />

4. 模式匹配

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

<input type="text" ng-pattern="/[a-zA-Z]/" />

5. 电子邮件

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

<input type="email" name="email" ng-model="user.email" />

6. 数字

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

<input type="number" name="age" ng-model="user.age" />

7. URL

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

<input type="url" name="homepage" ng-model="user.facebook_url" />
Javascript 相关文章推荐
jQuery中unbind()方法用法实例
Jan 19 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
微信小程序如何播放腾讯视频的实现
Sep 20 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 #Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 #Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 #Javascript
JavaScript的removeChild()函数用法详解
Dec 27 #Javascript
JavaScript构造函数详解
Dec 27 #Javascript
JavaScript生成二维码图片小结
Dec 27 #Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 #Javascript
You might like
PHP 错误之引号中使用变量
2009/05/04 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHPMailer发送邮件
2016/12/28 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
微信小程序 开发指南详解
2016/09/27 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
js实现滑动滑块验证登录
2020/07/24 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
在Python中使用__slots__方法的详细教程
2015/04/28 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python连接phoenix的方法示例
2017/09/29 Python
如何在python中使用selenium的示例
2017/12/26 Python
深入理解Django的中间件middleware
2018/03/14 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
浅谈Python中的模块
2020/06/10 Python
python让函数不返回结果的方法
2020/06/22 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
2015新年寄语(一句话)
2014/12/08 职场文书