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

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

image

image

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

image

image

image

image

image

image

image

image

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

image

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

image

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

image

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

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

image

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

image

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

image

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

image

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

image

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

image

image

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

apps8 2.png