当前位置：首页 > 资讯 > 技术文档

AngularJS使用ngMessages进行表单验证

时间：2021-11-08 03:56 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS使用ngMessages进行表单验证

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为我们自动判断显示哪种错误。 [b]使用ngMessages的几个关键点：[/b] ● 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 [b]==index.html[/b]

<!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>

[b]app.js[/b]

angular.module('app',['ngMessages'])
.controller('MainCtrl', MainCtrl);
function MainCtrl(){
}

[b]emailmessages.html[/b] 把有关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>

[b]ps：常用的表单验证指令 [/b] [b]1. 必填项验证[/b] 某个表单输入是否已填写，只要在输入字段元素上添加HTML5标记required即可：

[u]复制代码[/u] 代码如下:

[b]2. 最小长度[/b] 验证表单输入的文本长度是否大于某个最小值，在输入字段上使用指令ng-minleng= "{number}"：

[u]复制代码[/u] 代码如下:

[b]3. 最大长度[/b] 验证表单输入的文本长度是否小于或等于某个最大值，在输入字段上使用指令ng-maxlength="{number}"：

[u]复制代码[/u] 代码如下:

[b]4. 模式匹配[/b] 使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式：

[u]复制代码[/u] 代码如下:

[b]5. 电子邮件[/b] 验证输入内容是否是电子邮件，只要像下面这样将input的类型设置为email即可：

[u]复制代码[/u] 代码如下:

[b]6. 数字[/b] 验证输入内容是否是数字，将input的类型设置为number：

[u]复制代码[/u] 代码如下:

[b]7. URL[/b] 验证输入内容是否是URL，将input的类型设置为 url：

[u]复制代码[/u] 代码如下:

全部评论(0)

上一篇：网页自动跳转代码收集
下一篇：AngularJS实现表单验证

资讯排行榜
更多>>