php swift 注册登录,Swift - RxSwift的使用详解54（一个用户注册样例1：基本功能实现）...

本文同样是一个 MVVM 架构的样例(使用 Driver)。主要演示的是输入内容的条件验证，以及验证结果与视图的绑定。

1，效果图

(1)这个是官方的演示样例(我稍作修改)，主要用来模拟用户注册流程。

(2)默认“注册”按钮不可用，只有用户名、密码、再次输入密码三者都符合如下条件时才可用：

输入用户名时会同步检查该用户名是否符合条件(只能为数字或字母)，以及是否已存在(网络请求)，并在输入框下方显示验证结果。

输入密码时会检查密码是否符合条件(最少要 5 位)，并在输入框下方显示验证结果。

再次输入密码时会检查两个密码是否一致，并在输入框下方显示验证结果。

(3)当所有输入都符合条件时，点击“注册”按钮发起请求，并将结果弹出显示。

2，页面设计

(1)首先我们在 storyboard 中添加 3 个输入框、3 个文本标签，它们分别用于输入用户名、密码、确认密码，以及对应的验证结果显示。

(2)接着在界面最下方添加一个按钮用于注册。

(3)最后将这个 7 个 UI 控件与代码做 @IBOutlet 关联。

3，网络请求服务

我们首先将需要调用的网络请求：验证用户名是否存在，用户注册封装起来(GitHubNetworkService.swift)，方便后面使用。(这里使用最简单的 URLSession 请求数据，大家也可参考我之前的文章改用 Moya)

import Foundation

import RxSwift

//GitHub网络请求服务

class GitHubNetworkService {

//验证用户是否存在

func usernameAvailable(_ username: String) -> Observable {

//通过检查这个用户的GitHub主页是否存在来判断用户是否存在

let url = URL(string: "https://github.com/\(username.URLEscaped)")!

let request = URLRequest(url: url)

return URLSession.shared.rx.response(request: request)

.map { pair in

//如果不存在该用户主页，则说明这个用户名可用

return pair.response.statusCode == 404

}

.catchErrorJustReturn(false)

}

//注册用户

func signup(_ username: String, password: String) -> Observable {

//这里我们没有真正去发起请求，而是模拟这个操作(平均每3次有1次失败)

let signupResult = arc4random() % 3 == 0 ? false : true

return Observable.just(signupResult)

.delay(1.5, scheduler: MainScheduler.instance) //结果延迟1.5秒返回

}

}

//扩展String

extension String {

//字符串的url地址转义

var URLEscaped: String {

return self.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed) ?? ""

}

}

4，用户注册验证服务

(1)首先定义一个用于表示验证结果和信息的枚举(ValidationResult)，后面我们会将它作为验证结果绑定到界面上。

import UIKit

//验证结果和信息的枚举

enum ValidationResult {

case validating //正在验证中s

case empty //输入为空

case ok(message: String) //验证通过

case failed(message: String) //验证失败

}

//扩展ValidationResult，对应不同的验证结果返回验证是成功还是失败

extension ValidationResult {

var isValid: Bool {

switch self {

case .ok:

return true

default:

return false

}

}

}

//扩展ValidationResult，对应不同的验证结果返回不同的文字描述

extension ValidationResult: CustomStringConvertible {

var description: String {

switch self {

case .validating:

return "正在验证..."

case .empty:

return ""

case let .ok(message):

return message

case let .failed(message):

return message

}

}

}

//扩展ValidationResult，对应不同的验证结果返回不同的文字颜色

extension ValidationResult {

var textColor: UIColor {

switch self {

case .validating:

return UIColor.gray

case .empty:

return UIColor.black

case .ok:

return UIColor(red: 0/255, green: 130/255, blue: 0/255, alpha: 1)

case .failed:

return UIColor.red

}

}

}

(2)接着将用户名、密码等各种需要用到的验证封装起来(GitHubSignupService.swift)，方便后面使用。(返回的就是上面定义的 ValidationResult)

import UIKit

import RxSwift

//用户注册服务

class GitHubSignupService {

//密码最少位数

let minPasswordCount = 5

//网络请求服务

lazy var networkService = {

return GitHubNetworkService()

}()

//验证用户名

func validateUsername(_ username: String) -> Observable {

//判断用户名是否为空

if username.isEmpty {

return .just(.empty)

}

//判断用户名是否只有数字和字母

if username.rangeOfCharacter(from: CharacterSet.alphanumerics.inverted) != nil {

return .just(.failed(message: "用户名只能包含数字和字母"))

}

//发起网络请求检查用户名是否已存在

return networkService

.usernameAvailable(username)

.map { available in

//根据查询情况返回不同的验证结果

if available {

return .ok(message: "用户名可用")

} else {

return .failed(message: "用户名已存在")

}

}

.startWith(.validating) //在发起网络请求前，先返回一个“正在检查”的验证结果

}

//验证密码

func validatePassword(_ password: String) -> ValidationResult {

let numberOfCharacters = password.count

//判断密码是否为空

if numberOfCharacters == 0 {

return .empty

}

//判断密码位数

if numberOfCharacters < minPasswordCount {

return .failed(message: "密码至少需要 \(minPasswordCount) 个字符")

}

//返回验证成功的结果

return .ok(message: "密码有效")

}

//验证二次输入的密码

func validateRepeatedPassword(_ password: String, repeatedPassword: String)

-> ValidationResult {

//判断密码是否为空

if repeatedPassword.count == 0 {

return .empty

}

//判断两次输入的密码是否一致

if repeatedPassword == password {

return .ok(message: "密码有效")

} else {

return .failed(message: "两次输入的密码不一致")

}

}

}

5，ViewModel 定义

下面是本文的重点，我们创建一个用户注册页面的 ViewModel(GitHubSignupViewModel.swift)，它的作用就是将用户各种输入行为，转换成输出状态。

import RxSwift

import RxCocoa

class GitHubSignupViewModel {

//用户名验证结果

let validatedUsername: Driver

//密码验证结果

let validatedPassword: Driver

//再次输入密码验证结果

let validatedPasswordRepeated: Driver

//注册按钮是否可用

let signupEnabled: Driver

//注册结果

let signupResult: Driver

//ViewModel初始化(根据输入实现对应的输出)

init(

input: (

username: Driver,

password: Driver,

repeatedPassword: Driver,

loginTaps: Signal

),

dependency: (

networkService: GitHubNetworkService,

signupService: GitHubSignupService

)) {

//用户名验证

validatedUsername = input.username

.flatMapLatest { username in

return dependency.signupService.validateUsername(username)

.asDriver(onErrorJustReturn: .failed(message: "服务器发生错误!"))

}

//用户名密码验证

validatedPassword = input.password

.map { password in

return dependency.signupService.validatePassword(password)

}

//重复输入密码验证

validatedPasswordRepeated = Driver.combineLatest(

input.password,

input.repeatedPassword,

resultSelector: dependency.signupService.validateRepeatedPassword)

//注册按钮是否可用

signupEnabled = Driver.combineLatest(

validatedUsername,

validatedPassword,

validatedPasswordRepeated

) { username, password, repeatPassword in

username.isValid && password.isValid && repeatPassword.isValid

}

.distinctUntilChanged()

//获取最新的用户名和密码

let usernameAndPassword = Driver.combineLatest(input.username, input.password) {

(username: $0, password: $1) }

//注册按钮点击结果

signupResult = input.loginTaps.withLatestFrom(usernameAndPassword)

.flatMapLatest { pair in

return dependency.networkService.signup(pair.username,

password: pair.password)

.asDriver(onErrorJustReturn: false)

}

}

}

6，ViewModel 与视图的绑定

(1)首先为了让 ValidationResult 能绑定到 label 上，我们要对 UILabel 进行扩展(BindingExtensions.swift)

import UIKit

import RxSwift

import RxCocoa

//扩展UILabel

extension Reactive where Base: UILabel {

//让验证结果(ValidationResult类型)可以绑定到label上

var validationResult: Binder {

return Binder(base) { label, result in

label.textColor = result.textColor

label.text = result.description

}

}

}

(2)最后在主视图控制器中使用 ViewModel 进行绑定即可。

import UIKit

import RxSwift

import RxCocoa

class ViewController: UIViewController {

//用户名输入框、以及验证结果显示标签

@IBOutlet weak var usernameOutlet: UITextField!

@IBOutlet weak var usernameValidationOutlet: UILabel!

//密码输入框、以及验证结果显示标签

@IBOutlet weak var passwordOutlet: UITextField!

@IBOutlet weak var passwordValidationOutlet: UILabel!

//重复密码输入框、以及验证结果显示标签

@IBOutlet weak var repeatedPasswordOutlet: UITextField!

@IBOutlet weak var repeatedPasswordValidationOutlet: UILabel!

//注册按钮

@IBOutlet weak var signupOutlet: UIButton!

let disposeBag = DisposeBag()

override func viewDidLoad() {

super.viewDidLoad()

//初始化ViewModel

let viewModel = GitHubSignupViewModel(

input: (

username: usernameOutlet.rx.text.orEmpty.asDriver(),

password: passwordOutlet.rx.text.orEmpty.asDriver(),

repeatedPassword: repeatedPasswordOutlet.rx.text.orEmpty.asDriver(),

loginTaps: signupOutlet.rx.tap.asSignal()

),

dependency: (

networkService: GitHubNetworkService(),

signupService: GitHubSignupService()

)

)

//用户名验证结果绑定

viewModel.validatedUsername

.drive(usernameValidationOutlet.rx.validationResult)

.disposed(by: disposeBag)

//密码验证结果绑定

viewModel.validatedPassword

.drive(passwordValidationOutlet.rx.validationResult)

.disposed(by: disposeBag)

//再次输入密码验证结果绑定

viewModel.validatedPasswordRepeated

.drive(repeatedPasswordValidationOutlet.rx.validationResult)

.disposed(by: disposeBag)

//注册按钮是否可用

viewModel.signupEnabled

.drive(onNext: { [weak self] valid in

self?.signupOutlet.isEnabled = valid

self?.signupOutlet.alpha = valid ? 1.0 : 0.3

})

.disposed(by: disposeBag)

//注册结果绑定

viewModel.signupResult

.drive(onNext: { [unowned self] result in

self.showMessage("注册" + (result ? "成功" : "失败") + "!")

})

.disposed(by: disposeBag)

}

//详细提示框

func showMessage(_ message: String) {

let alertController = UIAlertController(title: nil,

message: message, preferredStyle: .alert)

let okAction = UIAlertAction(title: "确定", style: .cancel, handler: nil)

alertController.addAction(okAction)

self.present(alertController, animated: true, completion: nil)

}

}