首页 / ANGULAR / AngularJS使用ngMessages进行表单验证_AngularJS

AngularJS使用ngMessages进行表单验证_AngularJS

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJS使用ngMessages进行表单验证_AngularJS，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1726字，纯文字阅读大概需要3分钟。

内容图文

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

名称为"ngMessages"的module，通过npm install angular-messages进行安装。在没有使用ngMessages之前，我们可能这样写验证：

以上，列举了每种可能的验证失败，并且手工编写是否显示错误提示信息。

有了"ngMessages"这个module,大致这么写：

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

app.js

emailmessages.html

把有关email的表单验证放在这里，通过

显示到页面某个位置上。

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使用ngMessages进行表单验证_AngularJS全部内容，希望文章能够帮你解决AngularJS使用ngMessages进行表单验证_AngularJS所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/328746.html

来源：【匿名】