[Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(shanqingyongzhi)
➤博客园地址:山青咏芝(https://www.cnblogs.com/strengthen/)
➤GitHub地址:https://github.com/strengthen/LeetCode
➤原文地址:https://www.cnblogs.com/strengthen/p/10193784.html
➤如果链接不是山青咏芝的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
本文将演示如何快速实现表单是输入验证。
首先确保在项目中已经安装了所需的第三方库。
点击【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】
点击【显示辅助编辑器】按钮,显示辅助编辑器。
在代码编辑区名称属性左侧的连接提示图标上点击,并拖动到所需要连接到的控件。