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(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
javascript与有限状态机详解
May 08 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
基于复选框demo(分享)
Sep 27 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
详解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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
php定时执行任务设置详解
2015/02/06 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
php查询内存信息操作示例
2019/05/09 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
实例讲解python函数式编程
2014/06/09 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Python2随机数列生成器简单实例
2017/09/04 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python正则实现提取电话功能
2018/02/24 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
python之语音识别speech模块
2020/09/09 Python
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
公司财务自我评价分享
2013/12/17 职场文书
群众路线领导对照材料
2014/08/23 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python