[Swift通天遁地]二、表格表單-(18)快速應用多種預定義格式的表單驗證
阿新 • • 發佈：2018-12-31
本文將演示表單在提交時的資料驗證。
在專案導航區，開啟檢視控制器的程式碼檔案【ViewController.swift】
現在開始編寫程式碼，給表單新增驗證的功能。
1 import UIKit 2 //首先在當前類檔案中， 3 //引入以及安裝的第三方類庫 4 import Eureka 5 6 //修改當前檢視控制器類的父類的名稱 7 class ViewController: FormViewController { 8 9 override func viewDidLoad() { 10 super.viewDidLoad()11 12 //設定當驗證失敗時，標籤行的視覺重新整理事件 13 LabelRow.defaultCellUpdate = 14 { 15 cell, row in 16 //設定背景顏色為紅色 17 cell.contentView.backgroundColor = .red 18 //設定字型的顏色為白色 19 cell.textLabel?.textColor = .white20 //設定字型的樣式 21 cell.textLabel?.font = UIFont.boldSystemFont(ofSize: 13) 22 //設定文字的對齊方式 23 cell.textLabel?.textAlignment = .right 24 } 25 //設定文字行的視覺變化 26 TextRow.defaultCellUpdate = 27 { 28 cell, row in29 //當驗證失敗時 30 if !row.isValid 31 { 32 //設定字型的顏色為紅色 33 cell.titleLabel?.textColor = .red 34 } 35 } 36 37 38 form 39 //在表單中新增一個段落，並設定段落的頭部和尾部資訊 40 +++ Section(header: "Required Rule", 41 footer: "Options: Validates on change") 42 //在該段落中新增一個文字 43 <<< TextRow() 44 { 45 //設定本行的標題文字 46 $0.title = "Required Rule" 47 //新增驗證的規則為非空， 48 //如果該行的內容為空，則會提示驗證錯誤。 49 $0.add(rule: RuleRequired()) 50 //設定值發生變化時進行驗證 51 $0.validationOptions = .validatesOnChange 52 } 53 54 //在表單中新增一個段落，並設定段落的頭部和尾部資訊 55 +++ Section(header: "Email Rule, Required Rule", 56 footer: "Options: Validates on change after blurred") 57 58 //在該段落中新增一個文字 59 <<< TextRow() 60 { 61 //設定本行的標題文字 62 $0.title = "Email Rule" 63 //新增驗證的規則為非空， 64 //如果該行的內容為空，則會提示驗證錯誤。 65 $0.add(rule: RuleRequired()) 66 //建立一個字串型別的規則集合 67 var ruleSet = RuleSet<String>() 68 //新增非空驗證 69 ruleSet.add(rule: RuleRequired()) 70 //新增郵箱驗證 71 ruleSet.add(rule: RuleEmail()) 72 //將規則集合賦予當前的表單行 73 $0.add(ruleSet: ruleSet) 74 //設定當失去焦點，並且內容發生變化時，進行表單的驗證。 75 $0.validationOptions = .validatesOnChangeAfterBlurred 76 } 77 78 //在表單中新增一個段落，並設定段落的頭部和尾部資訊 79 +++ Section(header: "URL Rule", 80 footer: "Options: Validates on change") 81 82 //新增一個網址行 83 <<< URLRow() 84 { 85 //設定本行的標題文字 86 $0.title = "URL Rule" 87 //新增網址格式的驗證 88 $0.add(rule: RuleURL()) 89 //設定值發生變化時進行驗證 90 $0.validationOptions = .validatesOnChange 91 } 92 //設定單元格的重新整理動作 93 .cellUpdate 94 { 95 cell, row in 96 //當驗證失敗時 97 if !row.isValid 98 { 99 //設定單元格的字型顏色為紅色 100 cell.titleLabel?.textColor = .red 101 } 102 } 103 104 //在表單中新增一個段落，並設定段落的頭部和尾部資訊 105 +++ Section(header: "MinLength 8 Rule, MaxLength 13 Rule", 106 footer: "Options: Validates on blurred") 107 //新增一個密碼行 108 <<< PasswordRow() 109 { 110 //設定本行的標題文字 111 $0.title = "Password" 112 //新增驗證規則： 113 //設定最小長度為8 114 $0.add(rule: RuleMinLength(minLength: 8)) 115 //設定最大長度為13 116 $0.add(rule: RuleMaxLength(maxLength: 13)) 117 //使用者需要輸入最小長度和最大長度之間的內容 118 } 119 //設定單元格的重新整理動作 120 .cellUpdate 121 { 122 cell, row in 123 //當驗證失敗時 124 if !row.isValid 125 { 126 //設定單元格的字型顏色為紅色 127 cell.titleLabel?.textColor = .red 128 } 129 } 130 131 //新增一個段落，並設定段落的頭部和尾部的資訊 132 +++ Section(header: "Should be GreaterThan 2 and SmallerThan 999", 133 footer: "Options: Validates on blurred") 134 135 //新增一個整數行 136 <<< IntRow() 137 { 138 //設定本行的標題文字 139 $0.title = "Range Rule" 140 //新增驗證規則：允許使用者輸入2~999之間的整數 141 $0.add(rule: RuleGreaterThan(min: 2)) 142 $0.add(rule: RuleSmallerThan(max: 999)) 143 } 144 //設定單元格的重新整理動作 145 .cellUpdate 146 { 147 cell, row in 148 //當驗證失敗時 149 if !row.isValid 150 { 151 //設定單元格的字型顏色為紅色 152 cell.titleLabel?.textColor = .red 153 } 154 } 155 156 //新增一個段落，並設定段落的頭部和尾部的資訊 157 +++ Section(header: "Match field values", footer: "Options: Validates on blurred") 158 159 //新增一個密碼行 160 <<< PasswordRow("password") 161 { 162 //設定本行的標題文字 163 $0.title = "Password" 164 } 165 //新增一個密碼行 166 <<< PasswordRow() 167 { 168 //設定本行的標題文字 169 $0.title = "Confirm Password" 170 //新增驗證規則：設定長度為8~13 171 $0.add(rule: RuleMinLength(minLength: 8)) 172 $0.add(rule: RuleMaxLength(maxLength: 13)) 173 } 174 //設定單元格的重新整理動作 175 .cellUpdate 176 { cell, row in 177 //當驗證失敗時 178 if !row.isValid 179 { 180 //設定單元格的字型顏色為紅色 181 cell.titleLabel?.textColor = .red 182 } 183 } 184 185 //新增一個段落，並設定段落的頭部和尾部的資訊 186 +++ Section(header: "More sophisticated validations UX using callbacks", footer: "") 187 188 //新增一個文字行 189 <<< TextRow() 190 { 191 //設定本行的標題文字 192 $0.title = "Required Rule" 193 //新增驗證規則：非空 194 $0.add(rule: RuleRequired()) 195 //設定值發生變化時進行驗證 196 $0.validationOptions = .validatesOnChange 197 } 198 //設定單元格的重新整理動作 199 .cellUpdate 200 { 201 cell, row in 202 //當驗證失敗時 203 if !row.isValid 204 { 205 //設定單元格的字型顏色為紅色 206 cell.titleLabel?.textColor = .red 207 } 208 } 209 //設定單元格的在驗證發生變化時的情況 210 .onRowValidationChanged 211 { 212 cell, row in 213 //獲得當前表單行在表單中的序號 214 let rowIndex = row.indexPath!.row 215 //遍歷 216 while row.section!.count > rowIndex + 1 && row.section?[rowIndex + 1] is LabelRow 217 { 218 //刪除當前段落的錯誤資訊標籤 219 row.section?.remove(at: rowIndex + 1) 220 } 221 //當驗證失敗時 222 if !row.isValid 223 { 224 //對所有的錯誤資訊進行遍歷 225 for (index, validationMsg) in row.validationErrors.map({ $0.msg }).enumerated() 226 { 227 //建立一個標籤表單行 228 let labelRow = LabelRow() 229 { 230 //設定本行的標題文字為錯誤資訊 231 $0.title = validationMsg 232 //同時設定單元格的高度 233 $0.cell.height = { 30 } 234 } 235 //將標籤行，插入到當前行的下方 236 row.section?.insert(labelRow, at: row.indexPath!.row + index + 1) 237 } 238 } 239 } 240 //新增一個郵箱表單行 241 <<< EmailRow() 242 { 243 //設定本行的標題文字 244 $0.title = "Email Rule" 245 //新增驗證規則： 246 //非空規則 247 $0.add(rule: RuleRequired()) 248 //郵箱格式規則 249 $0.add(rule: RuleEmail()) 250 //設定當失去焦點，並且內容發生變化時進行表單的驗證。 251 $0.validationOptions = .validatesOnChangeAfterBlurred 252 } 253 //設定單元格的重新整理動作 254 .cellUpdate 255 { 256 cell, row in 257 //當驗證失敗時 258 if !row.isValid 259 { 260 //設定單元格的字型顏色為紅色 261 cell.titleLabel?.textColor = .red 262 } 263 } 264 //處理單元格在驗證發生變化時的情況 265 .onRowValidationChanged 266 { 267 cell, row in 268 //獲得當前表單行在表單中的序號 269 let rowIndex = row.indexPath!.row 270 while row.section!.count > rowIndex + 1 && row.section?[rowIndex + 1] is LabelRow 271 { 272 //刪除當前段落的錯誤資訊標籤 273 row.section?.remove(at: rowIndex + 1) 274 } 275 //當驗證失敗時 276 if !row.isValid 277 { 278 //對所有的錯誤資訊進行遍歷 279 for (index, validationMsg) in row.validationErrors.map({ $0.msg }).enumerated() 280 { 281 //建立一個標籤表單行 282 let labelRow = LabelRow() 283 { 284 //設定本行的標題文字為錯誤資訊 285 $0.title = validationMsg 286 //同時設定單元格的高度 287 $0.cell.height = { 30 } 288 } 289 //將標籤行，插入到當前行的下方 290 row.section?.insert(labelRow, at: row.indexPath!.row + index + 1) 291 } 292 } 293 } 294 //新增一個網址行 295 <<< URLRow() 296 { 297 //設定本行的標題文字 298 $0.title = "URL Rule" 299 //新增驗證規則，為網址格式的驗證 300 $0.add(rule: RuleURL()) 301 //設定當值發生變化時進行驗證 302 $0.validationOptions = .validatesOnChange 303 } 304 //設定表單的重新整理動作 305 .cellUpdate 306 { 307 cell, row in 308 //當驗證失敗時 309 if !row.isValid 310 { 311 //設定單元格的字型顏色為紅色 312 cell.titleLabel?.textColor = .red 313 } 314 } 315 //處理單元格在驗證發生變化時的情況 316 .onRowValidationChanged 317 { 318 cell, row in 319 //獲得當前表單行在表單中的序號 320 let rowIndex = row.indexPath!.row 321 while row.section!.count > rowIndex + 1 && row.section?[rowIndex + 1] is LabelRow 322 { 323 //刪除當前段落的錯誤資訊標籤 324 row.section?.remove(at: rowIndex + 1) 325 } 326 //當驗證失敗時 327 if !row.isValid 328 { 329 //對所有的錯誤資訊進行遍歷 330 for (index, validationMsg) in row.validationErrors.map({ $0.msg }).enumerated() 331 { 332 //建立一個標籤表單行 333 let labelRow = LabelRow() 334 { 335 //設定本行的標題文字為錯誤資訊 336 $0.title = validationMsg 337 //同時設定單元格的高度 338 $0.cell.height = { 30 } 339 } 340 //將標籤行，插入到當前行的下方 341 row.section?.insert(labelRow, at: row.indexPath!.row + index + 1) 342 } 343 } 344 } 345 //新增一個密碼行 346 <<< PasswordRow("password2") 347 { 348 //設定本行的標題文字 349 $0.title = "Password" 350 //新增驗證規則：長度為8~13 351 $0.add(rule: RuleMinLength(minLength: 8)) 352 $0.add(rule: RuleMaxLength(maxLength: 13)) 353 } 354 //設定表單的重新整理動作 355 .cellUpdate 356 { 357 cell, row in 358 //當驗證失敗時 359 if !row.isValid 360 { 361 //設定單元格的字型顏色為紅色 362 cell.titleLabel?.textColor = .red 363 } 364 } 365 //處理單元格在驗證發生變化時的情況 366 .onRowValidationChanged 367 { 368 cell, row in 369 //獲得當前表單行在表單中的序號 370 let rowIndex = row.indexPath!.row 371 while row.section!.count > rowIndex + 1 && row.section?[rowIndex + 1] is LabelRow 372 { 373 //刪除當前段落的錯誤資訊標籤 374 row.section?.remove(at: rowIndex + 1) 375 } 376 //當驗證失敗時 377 if !row.isValid 378 { 379 //對所有的錯誤資訊進行遍歷 380 for (index, validationMsg) in row.validationErrors.map({ $0.msg }).enumerated() 381 { 382 //建立一個標籤表單行 383 let labelRow = LabelRow() 384 { 385 //設定本行的標題文字為錯誤資訊 386 $0.title = validationMsg 387 //同時設定單元格的高度 388 $0.cell.height = { 30 } 389 } 390 //將標籤行，插入到當前行的下方 391 row.section?.insert(labelRow, at: row.indexPath!.row + index + 1) 392 } 393 } 394 } 395 //新增一個密碼行 396 <<< PasswordRow() 397 { 398 //設定本行的標題文字 399 $0.title = "Confirm Password" 400 //新增驗證規則：長度為8~13 401 $0.add(rule: RuleMinLength(minLength: 8)) 402 $0.add(rule: RuleMaxLength(maxLength: 13)) 403 } 404 //設定表單的重新整理動作 405 .cellUpdate 406 { 407 cell, row in 408 //當驗證失敗時 409 if !row.isValid 410 { 411 //設定單元格的字型顏色為紅色 412 cell.titleLabel?.textColor = .red 413 } 414 } 415 //處理單元格在驗證發生變化時的情況 416 .onRowValidationChanged 417 { 418 cell, row in 419 //獲得當前表單行在表單中的序號 420 let rowIndex = row.indexPath!.row 421 while row.section!.count > rowIndex + 1 && row.section?[rowIndex + 1] is LabelRow 422 { 423 //刪除當前段落的錯誤資訊標籤 424 row.section?.remove(at: rowIndex + 1) 425 } 426 //當驗證失敗時 427 if !row.isValid 428 { 429 //對所有的錯誤資訊進行遍歷 430 for (index, validationMsg) in row.validationErrors.map({ $0.msg }).enumerated() 431 { 432 //建立一個標籤表單行 433 let labelRow = LabelRow() 434 { 435 //設定本行的標題文字為錯誤資訊 436 $0.title = validationMsg 437 //同時設定單元格的高度 438 $0.cell.height = { 30 } 439 } 440 //將標籤行，插入到當前行的下方 441 row.section?.insert(labelRow, at: row.indexPath!.row + index + 1) 442 } 443 } 444 } 445 //新增一個整數行 446 <<< IntRow() 447 { 448 //設定本行的標題文字 449 $0.title = "Range Rule" 450 //新增驗證規則：允許輸入2`999之間的整數 451 $0.add(rule: RuleGreaterThan(min: 2)) 452 $0.add(rule: RuleSmallerThan(max: 999)) 453 } 454 //設定表單的重新整理動作 455 .cellUpdate 456 { 457 cell, row in 458 //當驗證失敗時 459 if !row.isValid 460 { 461 //設定單元格的字型顏色為紅色 462 cell.titleLabel?.textColor = .red 463 } 464 } 465 //處理單元格在驗證發生變化時的情況 466 .onRowValidationChanged 467 { 468 cell, row in 469 //獲得當前表單行在表單中的序號 470 let rowIndex = row.indexPath!.row 471 while row.section!.count > rowIndex + 1 && row.section?[rowIndex + 1] is LabelRow 472 { 473 //刪除當前段落的錯誤資訊標籤 474 row.section?.remove(at: rowIndex + 1) 475 } 476 //當驗證失敗時 477 if !row.isValid 478 { 479 //對所有的錯誤資訊進行遍歷 480 for (index, validationMsg) in row.validationErrors.map({ $0.msg }).enumerated() 481 { 482 //建立一個標籤表單行 483 let labelRow = LabelRow() 484 { 485 //設定本行的標題文字為錯誤資訊 486 $0.title = validationMsg 487 //同時設定單元格的高度 488 $0.cell.height = { 30 } 489 } 490 //將標籤行，插入到當前行的下方 491 row.section?.insert(labelRow, at: row.indexPath!.row + index + 1) 492 } 493 } 494 } 495 496 //新增一個新的段落 497 +++ Section() 498 //在該段落中國新增一個按鈕行 499 <<< ButtonRow() 500 { 501 //設定本行的標題文字為錯誤資訊 502 $0.title = "Tap to force form validation" 503 } 504 //當表單處於選擇狀態時 505 .onCellSelection 506 { 507 cell, row in 508 //強制校驗表單中的所有元素 509 row.section?.form?.validate() 510 } 511 } 512 513 override func didReceiveMemoryWarning() { 514 super.didReceiveMemoryWarning() 515 // Dispose of any resources that can be recreated. 516 } 517 }