AngularJS使用ngMessages进行表单验证

前端技术 2023/09/07 JavaScript

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\" />

本文地址：https://www.stayed.cn/item/20180

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案