本文將演示如何快速實現表單是輸入驗證。

首先確保在專案中已經安裝了所需的第三方庫。

點選【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】

點選【顯示輔助編輯器】按鈕，顯示輔助編輯器。

在程式碼編輯區名稱屬性左側的連線提示圖示上點選，並拖動到所需要連線到的控制元件。