时间:2021-05-28
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" />
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
AngularJS输入验证AngularJS表单和控件可以验证输入的数据。输入验证在前面的几个章节中,你已经学到关于AngularJS表单和控件的知识。Angu
做开发这么久一直被表单验证这个看似简单又不简单的东西搞得非常烦躁,于是写了个表单验证的框架,再也不用担心这个心烦的验证了。这里使用AngularJS的指令进行处
AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证1.使用angularjs的表单验证正则式验证只需要配置一个正
本文实例讲述了AngularJS验证信息框架的封装插件用法。分享给大家供大家参考,具体如下:AngularJS的表单验证规则angular.js的表单验证规则有
本文实例讲述了AngularJS学习笔记之表单验证功能。分享给大家供大家参考,具体如下:一、执行基本的表单验证表单angular.module('example