[Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证

本文将演示如何快速实现表单是输入验证。

首先确保在项目中已经安装了所需的第三方库。

点击【Podfile】,查看安装配置文件。

1 platform :ios, '12.0'
2 use_frameworks!
3 
4 target 'DemoApp' do
5     source 'https://github.com/CocoaPods/Specs.git'
6     pod 'SwiftValidator', :git => 'https://github.com/jpotts18/SwiftValidator.git', :branch => 'master'
7 end

根据配置文件中的相关配置，安装第三方库。

然后点击打开【DemoApp.xcworkspace】项目文件。

在项目导航区，打开故事版文件【Main.storyboard】

打开控件库，插入一个标签控件。点击【属性检查器】，进入属性设置面板。

设置标签默认文字的内容。拖动标签控件，增加标签控件的宽度。

再次插入一个标签到故事板中，设置文字内容右对齐，

该标签将用来显示表单验证时的错误信息。

往故事板中插入一个输入框，设置文本框的占位文字。

继续添加其他的控件，直到完成整个表单的制作。

再给表单添加一个提交按钮，设置按钮控件的标题文字：【Submit】

背景色：【Background】

前景色:【Tint】

在项目导航区，打开视图控制器的代码文件【ViewController.swift】

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

  1 import UIKit
  2 //在当前的类文件中引入已经安装的第三方类库
  3 import SwiftValidator
  4 
  5 //使视图控制器类遵循表单验证协议。
  6 class ViewController: UIViewController,ValidationDelegate {
  7     
  8     //创建五个文本框属性，
  9     //这五个文本框属性，将和故事板的五个文本框控件进行连接。
 10     @IBOutlet weak var fullNameTextField: UITextField!
 11     @IBOutlet weak var emailTextField: UITextField!
 12     @IBOutlet weak var phoneNumberTextField: UITextField!
 13     @IBOutlet weak var zipcodeTextField: UITextField!
 14     @IBOutlet weak var emailConfirmTextField: UITextField!
 15     
 16     //创建五个标签属性，
 17     //这五个标签属性，将和故事板的五个标签控件进行连接。
 18     //用来显示表单验证的错误信息。
 19     @IBOutlet weak var fullNameErrorLabel: UILabel!
 20     @IBOutlet weak var emailErrorLabel: UILabel!
 21     @IBOutlet weak var phoneNumberErrorLabel: UILabel!
 22     @IBOutlet weak var zipcodeErrorLabel: UILabel!
 23     @IBOutlet weak var emailConfirmErrorLabel: UILabel!
 24     
 25     //初始化一个表单验证器对象
 26     let validator = Validator()
 27     
 28     override func viewDidLoad() {
 29         super.viewDidLoad()
 30         
 31         //给视图添加一个触摸手势，用来关闭由于文本框控件处于焦点时，所弹出的键盘。
 32         self.view.addGestureRecognizer(UITapGestureRecognizer(target: self, 
 33                                                               action: #selector(ViewController.hideKeyboard)))
 34         
 35         //设置验证器的外观样式
 36         validator.styleTransformers(
 37             //设置当验证成功时的样式
 38             success:{ (validationRule) -> Void in
 39             //设置错误提示标签处于隐藏状态
 40             validationRule.errorLabel?.isHidden = true
 41             //设置错误提示标签的内容为空的字符串
 42             validationRule.errorLabel?.text = ""
 43             //对文本框进行一些外观的设置
 44             if let textField = validationRule.field as? UITextField
 45             {
 46                 //设置文本框的层的边框颜色为绿色
 47                 textField.layer.borderColor = UIColor.green.cgColor
 48                 //设置文本框的边框的宽度为1
 49                 textField.layer.borderWidth = 1.0
 50             }
 51             }, 
 52 
 53             //接着设置当验证失败时的样式
 54             error:{(validationError) -> Void in
 55             //设置错误提示标签处于显示状态
 56             validationError.errorLabel?.isHidden = false
 57             //设置错误提示标签的内容为错误的提示消息
 58             validationError.errorLabel?.text = validationError.errorMessage
 59             //对文本框进行一些外观的设置
 60             if let textField = validationError.field as? UITextField
 61             {
 62                 //设置文本框的层的边框颜色为红色
 63                 textField.layer.borderColor = UIColor.red.cgColor
 64                 //设置文本框的边框的宽度为1
 65                 textField.layer.borderWidth = 1.0
 66             }
 67         })
 68         
 69         //给验证器对象，注册需要进行验证的文本框，以验证失败时的错误标签
 70         //同时还设置了两个验证时的规则，即进行非空验证和全名验证
 71         validator.registerField(fullNameTextField,
 72                                 errorLabel: fullNameErrorLabel ,
 73                                 rules: [RequiredRule(),
 74                                 FullNameRule()])
 75 
 76         //进行非空验证和邮箱格式验证
 77         validator.registerField(emailTextField, 
 78                                 errorLabel: emailErrorLabel,
 79                                 rules: [RequiredRule(), 
 80                                 EmailRule()])
 81 
 82         //增加了一个匹配验证的规则，以保证两个邮箱文本框，具有相同的内容。
 83         validator.registerField(emailConfirmTextField,
 84                                 errorLabel: emailConfirmErrorLabel, 
 85                                 rules: [RequiredRule(), 
 86                                 ConfirmationRule(confirmField: emailTextField)])
 87 
 88         //增加了一个最小长度的验证，以验证是否输入了9个以上的字符
 89         validator.registerField(phoneNumberTextField, 
 90                                  errorLabel: phoneNumberErrorLabel, 
 91                                 rules: [RequiredRule(), 
 92                                 MinLengthRule(length: 9)])
 93         //增加了一个邮政编码格式的验证条件
 94         validator.registerField(zipcodeTextField,
 95                                 errorLabel: zipcodeErrorLabel, 
 96                                 rules: [RequiredRule(), 
 97                                 ZipCodeRule()])
 98     }
 99     
100     //添加一个方法，用来响应提交按钮的点击事件。
101     //该方法将为故事板中的提交按钮进行连接
102     @IBAction func submitTapped(_ sender: AnyObject)
103     {
104         //在控制台输出日志
105         print("Validating...")
106         //并调用验证器进行表单的验证操作。
107         validator.validate(self)
108     }
109     
110     //添加一个方法，当验证成功时调用该方法。
111     func validationSuccessful()
112     {
113         //在控制台输出验证成功的语句
114         print("Validation Success!")
115         //创建一个警告窗口，显示验证成功的信息。
116         let alert = UIAlertController(title: "Success",
117                                       message: "You are validated!", 
118                                       preferredStyle: UIAlertControllerStyle.alert)
119         //给警告窗口添加一个按钮，用于关闭警告窗口。
120         let defaultAction = UIAlertAction(title: "OK", style: .default, handler: nil)
121         alert.addAction(defaultAction)
122         //在当前的视图控制器中，以模态的方式打开警告窗口。
123         self.present(alert, animated: true, completion: nil)
124     }
125     
126     //添加一个方法，当验证失败时调用该方法。
127     func validationFailed(_ errors:[(Validatable, ValidationError)])
128     {
129         print("Validation FAILED!")
130     }
131     
132     //添加一个方法，当用户点击根视图时，隐藏弹出的键盘
133     func hideKeyboard()
134     {
135         self.view.endEditing(true)
136     }
137 }

在项目导航区，打开故事版文件【Main.storyboard】

点击【显示辅助编辑器】按钮，显示辅助编辑器。

在代码编辑区名称属性左侧的连接提示图标上点击，并拖动到所需要连接到的控件。