2.8 使用SwiftValidator快速实现表单的输入验证 [iOS开发中的神兵利器]



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. 然后依次设置按钮的位置和尺寸属性。


33.


34.


35.


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. 这样就连接好了一对控件和属性。使用相同的方式,连接其它的控件和属性。


69.


70.


71.


72.


73.


74.


75.


76.


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


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


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


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


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


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


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


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


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




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

0