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 相关文章推荐
js防止表单重复提交的两种方法
Sep 30 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
vue3.0生命周期的示例代码
Sep 24 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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 定界符格式引起的错误
2011/05/24 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
JS动画效果代码3
2008/04/03 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
javascript实现固定侧边栏
2021/02/09 Javascript
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
车间副主任岗位职责
2013/12/24 职场文书
老公给老婆的保证书
2014/04/28 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
女方离婚起诉书
2015/05/18 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang