[Swift通天遁地]2、表格表單-(8)快速實現表單的輸入驗證

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號:山青詠芝(shanqingyongzhi)
➤博客園地址:山青詠芝(https://www.cnblogs.com/strengthen/
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:http://www.javashuo.com/article/p-vjyokebs-kh.html 
➤若是連接不是山青詠芝的博客園地址,則多是爬取做者的文章。
➤原文已修改更新!強烈建議點擊原文地址閱讀!支持做者!支持原創!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★html

目錄:[Swift]通天遁地Swiftios

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

首先確保在項目中已經安裝了所需的第三方庫。github

點擊【Podfile】,查看安裝配置文件。swift

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】項目文件。app

在項目導航區,打開故事版文件【Main.storyboard】編輯器

打開控件庫,插入一個標籤控件。點擊【屬性檢查器】,進入屬性設置面板。ide

設置標籤默認文字的內容。拖動標籤控件,增長標籤控件的寬度。post

再次插入一個標籤到故事板中,設置文字內容右對齊,

該標籤將用來顯示錶單驗證時的錯誤信息。

往故事板中插入一個輸入框,設置文本框的佔位文字。

繼續添加其餘的控件,直到完成整個表單的製做。

再給表單添加一個提交按鈕,設置按鈕控件的標題文字:【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】

點擊【顯示輔助編輯器】按鈕,顯示輔助編輯器。

在代碼編輯區名稱屬性左側的鏈接提示圖標上點擊,並拖動到所須要鏈接到的控件。

相關文章
相關標籤/搜索