首页
/ 正文

Ionic Framework 应用程序中的 AngularJS 表单验证

更新时间: 2023-03-01 18:06:15

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;

《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前，星球内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2800+ 小伙伴加入学习，欢迎点击围观

在开发移动 Android 和 iOS 应用程序时，用户体验通常比应用程序实际提供的内容更重要。

您可以在应用程序中实现的一个快速且非常简单的增强功能是表单验证领域。最佳实践说你应该始终通过后端验证用户输入的数据，我同意。但是，通过前端验证，它可以改善您的用户体验。

然而，使用 HTML5 验证器验证 Ionic Framework 表单是一个糟糕的想法。如果您将它们排除在外，这将使您的用户体验更糟。相反，AngularJS 附带了自己的验证器，这些验证器在 Ionic Framework 移动应用程序中运行良好。

我们将检查如何使用一些 AngularJS 表单验证器来使我们的应用程序对用户来说更好。

让我们从命令提示符 (Windows) 或终端（Mac 或 Linux）创建一个新的 Ionic Framework 项目开始：


 ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

创建新的 Ionic 项目 Shell 1 2 3 4 ionic start IonicProject blank cd IonicProject ionic platform add ios ionic platform add android

与往常一样，请记住，除非您使用的是 Mac，否则您无法为 iOS 平台添加和构建。

该项目不使用任何额外的插件或库，因此您可以在网络浏览器或设备或模拟器上进行所有测试。让我们首先在项目的 www/index.html 文件中创建一个新表单。打开 www/index.html 并找到 <ion-content> 标签，因为我们将用以下内容替换它们：


 ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

现在忽略 ng-controller="ExampleController" 部分，让我们看看我们在这里做了什么。在 <form> 标记内，注意 novalidate 属性。这告诉我们的代码不要使用 HTML5 验证器。我们的 username 和 password 输入字段都附加了相同类型的验证器，但不是实际的输入类型。这两个字段都是必需的，并且都具有要满足的最小长度。还没有什么特别的事情发生。

下拉并注意五个 ng-show 标签。这些是我们将在事件发生时显示的消息。每个错误将根据不满足的要求显示。提交表单的按钮将保持禁用状态，直到通过使用 myForm.$invalid 变量认为表单真正有效。

那么我们可以使用什么样的 AngularJS 验证器呢？


 ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

除了这些表单属性之外，您还可以根据列出的输入类型检查有效性。例如，在我们的代码中，我们看到了以下内容的使用：


 ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

如果用户名无效且已被使用，上面的行会显示一条消息。如果用户名字段不是电子邮件地址，则认为该字段无效。

可用的表单属性如下：

财产	描述
$有效	基于您的规则是否有效的布尔值
$无效	基于您的规则是否无效的布尔值
$原始	如果尚未使用表单或输入值，则为真
$脏	如果已使用表单或输入，则为真
$感动	如果输入已经模糊，则为真

现在，虽然我们列出的 ExampleController 对于我们正在做的事情并不是很重要，但您仍然可以看一下它。在 www/js/app.js 文件中，添加以下控制器：


 ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

当您提交表单时，它只会显示一条包含您的用户名的警报。

结论

通过前端和后端验证用户输入的数据可以为您的用户体验带来巨大好处。由于 AngularJS 附带了一组验证器，因此在 Ionic Framework 中执行此操作并不困难。

可以在下面看到本文的视频版本。