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 相关文章推荐
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
Django 中 cookie的使用
2017/08/17 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
类似框架的js代码
2006/11/09 Javascript
javascript cookies操作集合
2010/04/12 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
Python入门学习之字符串与比较运算符
2015/10/12 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python中字符串的格式化方法小结
2016/05/03 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
替换python字典中的key值方法
2018/07/06 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python中if有多个条件处理方法
2020/02/26 Python
学院领导推荐信
2013/10/30 职场文书
《故乡》教学反思
2014/04/10 职场文书
激励口号大全
2014/06/17 职场文书
微笑服务标语
2014/06/24 职场文书
解析MySQL索引的作用
2022/03/03 MySQL
教你nginx跳转配置的四种方式
2022/07/07 Servers