iOS开发中的神兵利器

2.8 使用SwiftValidator快速实现表单的输入验证

2018-04-11 本文已影响60人互动教程网

1. 本节课将为您演示，如何快速实现表单的输入验证。首先确保在您的项目中，已经安装了所需的第三方库。在此处双击查看安装配置文件。

2. 根据配置文件中的相关设置，安装第三方库。安装完成之后，双击打开此处的项目文件。

3. 然后在左侧的项目导航区，打开故事板文件。

4. 我们将在故事板中，绘制项目中的用户界面。点击组件库面板右侧的垂直滚动条，跳转到标签控件所在的位置。

5. 然后将标签拖拽到故事板中的适当位置。

6. 接着点击属性检查器图标，进入属性设置面板。

7. 首先设置标签默认的文字内容。

8. 然后在标签周围的定界框上按下手指，并向右侧拖动，以增加标签控件的宽度。

9. 使用相同的方式，再从组件库拖动一个标签至故事板中。该标签将用来显示表单验证时的错误信息。

10. 同样调整该标签的宽度。

11. 继续调整标签的宽度。

12. 接着点击居右对齐图标，使标签的文字内容右对齐。

13. 点击字体右侧的向下箭头，缩小字体的尺寸。

14. 继续点击字体右侧的向下箭头，缩小字体的尺寸。

15. 再次缩小字体的尺寸。

16. 然后点击颜色下拉箭头，弹出颜色预设面板。

17. 在弹出的系统颜色预设面板中，选择一种颜色作为标签的字体颜色。

18. 点击组件库面板右侧的垂直滚动条，跳转到文本框控件所在的位置。

19. 接着将文本框拖动到故事板中。

20. 在左侧的圆角处按下手指，并向右侧拖动，使文本框的右边缘和标签的右边缘对齐。

21. 然后设置文本框的占位文字。

22. 使用相同的方式，继续添加其它的控件，直到完成整个表单的制作。

23. 添加完其它的表单控件之后，再给表单添加一个提交按钮。点击垂直滚动条，跳转到按钮组件所在的位置。

24. 然后将按钮从控件库中，拖动到故事板中的适当位置。

25. 接着设置按钮控件的标题文字。

26. 点击右侧的滚动条，切换至背景颜色设置区域。

27. 点击背景颜色右侧的下拉箭头，弹出颜色预设面板。

28. 在弹出的系统颜色预设面板中，选择一种颜色作为按钮的背景颜色。

29. 点击前景颜色右侧的下拉箭头，弹出颜色预设面板。

30. 在弹出的系统颜色预设面板中，选择一种颜色作为按钮的前景颜色。

31. 接着点击尺寸检查器图标，进入尺寸设置面板。

32. 然后依次设置按钮的位置和尺寸属性。

36. 接着在左侧的项目导航区，打开视图控制器的代码文件。

37. 点击右上角的显示或隐藏工具面板图标，隐藏右侧的工具面板。

38. 现在开始编写代码，实现表单的输入验证功能。

39. 首先在当前的类文件中，引入已经安装的第三方类库。

40. 然后使视图控制器的类，遵循表单验证协议。

41. 接着创建五个文本框属性，这五个文本框属性，将和故事板的五个文本框组件进行连接。

42. 创建五个标签属性，这五个标签属性，将和故事板的五个标签组件进行连接，用来显示表单验证的错误信息。

43. 初始化一个表单验证器对象。

44. 给根视图添加一个触摸手势，用来关闭由于文本框控件处于焦点时，所弹出的键盘。

45. 接着设置验证器的外观样式，首先设置当验证成功时的样式。

46. 设置错误提示标签处于隐藏状态，并且设置错误提示标签的内容为空的字符串。

47. 然后设置文本框的层的边框颜色为绿色，边框的宽度为1。

48. 接着设置当验证失败时的外观样式。

49. 设置错误提示标签处于显示状态，并且设置错误提示标签的内容，为错误的提示消息。

50. 然后对文本框进行一些外观的设置。

51. 设置文本框的层的边框颜色为红色，边框的宽度为1。

52. 接着给验证器对象，注册需要进行验证的文本框，以及验证失败时的错误标签。同时还设置了验证所遵循的两个规则，即进行非空验证和全名验证。

53. 使用相同的方式，给验证器注册其它的验证控件。验证规则为非空验证和邮箱格式验证。

54. 继续注册其它验证控件，同时增加了一个匹配验证的规则，以保证两个邮箱文本框，具有相同的内容。

55. 继续注册验证控件，同时增加了一个最小长度的验证，以验证是否输入了9个以上的字符。

56. 最后一次注册验证控件，添加了一个邮政编码格式的验证条件。

57. 添加一个方法，用来响应提交按钮的点击事件。该方法将为故事板中的提交按钮进行连接。

58. 在控制台输出日志，并调用验证器进行表单的验证操作。

59. 添加一个方法，当验证成功时调用该方法。

60. 在控制台输出验证成功的语句。

61. 然后创建一个警告窗口，显示验证成功的信息。

62. 给警告窗口添加一个按钮，当点击该按钮时，关闭警告窗口。

63. 在当前的视图控制器中，以模态的方式打开警告窗口。

64. 接着添加一个方法，用来响应表单验证失败时的情况。

65. 添加一个方法，当用户点击根视图时，隐藏弹出的键盘。然后在左侧的项目导航区，打开故事板文件。

66. 现在开始将故事板中的控件，和类文件中的属性进行连接的工作。首先点击显示辅助编辑器图标，打开辅助编辑器。

67. 然后在名称属性左侧的连接指示图标上，按下手指，并拖动到所需连接到的控件。

68. 这样完成了一对控件和属性的连接。使用相同的方式，连接其它的控件和属性。

77. 点击编辑器右侧的垂直滚动条，跳转到提交按钮响应方法所在的位置。

78. 然后将该方法和故事板中的提交按钮进行连接。

79. 接着点击左上角的[编译并运行]按钮，启动模拟器预览项目。

80. 在弹出的模拟器中，点击底部的提交按钮，执行对表单的验证。

81. 表单验证失败，并显示了在验证失败时的错误信息。在名称输入框内点击，开始名称的输入。

82. 在弹出的键盘上的提示区点击，输入一个单词。

83. 点击输入另一个单词。

84. 然后点击返回按钮，隐藏键盘。

85. 再次点击提交按钮，继续表单的验证。

86. 由于输入的名称符合验证规则，所以名称输入框的边框的颜色发生了变化，并且错误提示消息也消失了。最后点击[停止]按钮，关闭模拟器，并结束本节课程。

本文整理自：《app开发中的神兵利器》，真正的[手把手]教学模式，用最快的速度上手iOS开发，苹果商店App Store免费下载：https://itunes.apple.com/cn/app/id1209739676，或扫描本页底部的二维码。课程配套素材下载地址：资料下载

apps8 2.png

上一篇下一篇

猜你喜欢

热点阅读