美文网首页
RxSwfit 学习笔记(一)登录校验

RxSwfit 学习笔记(一)登录校验

作者: 尤先森 | 来源:发表于2019-08-26 10:24 被阅读0次

    这是一个模拟用户登录的程序。

    • 当用户输入用户名时,如果用户名不足 5 个字就给出红色提示语,并且无法输入密码,当用户名符合要求时才可以输入密码。
    • 同样的当用户输入的密码不到 5 个字时也给出红色提示语。
    • 当用户名和密码有一个不符合要求时底部的绿色按钮不可点击,只有当用户名和密码同时有效时按钮才可点击。
    • 当点击绿色按钮后弹出一个提示框,这个提示框只是用来做演示而已。

    摘录来自: “RxSwift 中文文档。”

    UI界面

    1. 属性声明
        var nameText:UITextField!
        var nameLable : UILabel!
        var pwdText:UITextField!
        var pwdLable : UILabel!
        var loginBtn:UIButton!
    
    1. 初始化
        func setUI() -> Void {
            view.backgroundColor = .groupTableViewBackground
            
            nameText = UITextField.init(frame: .init(x: 20, y: 100, width:  view.frame.size.width-40, height: 40))
            nameText.borderStyle = .roundedRect
            view.addSubview(nameText)
            
            nameLable = UILabel.init(frame: .init(x: 20, y: 150, width: nameText.frame.size.width, height: 20))
            nameLable.text = "用户名输入不合法"
            nameLable.textColor = .red
            view.addSubview(nameLable)
            
            pwdText = UITextField.init(frame: .init(x: 20, y: 180, width: view.frame.size.width-40, height: 40))
            pwdText.borderStyle = .roundedRect
            view.addSubview(pwdText)
            
            pwdLable = UILabel.init(frame: .init(x: 20, y: 230, width: nameText.frame.size.width, height: 20))
            pwdLable.text = "密码输入不合法"
            pwdLable.textColor = .red
            view.addSubview(pwdLable)
            
            loginBtn = UIButton.init(type: .system)
            loginBtn.setTitle("登录", for: .normal)
            loginBtn.frame = CGRect.init(x: 20, y: 270, width: view.frame.size.width-40, height: 40)
            loginBtn.backgroundColor = .white
            loginBtn.isEnabled = false
            view.addSubview(loginBtn)
        }
        
    

    Rx

        func setRx() -> Void {
            //用户名输入校验,长度是否超过5
            let userValidate = nameText.rx.text.orEmpty
                .map{$0.count>=5}
                .share()
            //密码输入校验,长度是否超过5  
            let pwdValidate = pwdText.rx.text.orEmpty
                .map{$0.count>=5}
                .share()
            //用户名、密码输入校验是否通过
            let allIsOK = Observable.combineLatest(userValidate,pwdValidate) {$0 && $1} // 取用户名和密码同时有效        
            //用户名输入校验绑定到“密码输入框”是否启动
            userValidate.bind(to: pwdText.rx.isEnabled).disposed(by: disposeBag)
            //用户名输入校验绑定到“校验提示文本”是否显示
            userValidate.bind(to: nameLable.rx.isHidden).disposed(by: disposeBag)
            //密码输入校验绑定到“校验提示文本”是否显示
            pwdValidate.bind(to: pwdLable.rx.isHidden).disposed(by: disposeBag)
            //所有校验绑定到“登录按钮”是否能够使用
            allIsOK.bind(to: loginBtn.rx.isEnabled).disposed(by: disposeBag)
           
             //登录按钮点击
            loginBtn.rx.tap.subscribe(onNext: {
                print("login")
            }).disposed(by: disposeBag)
            
        }
    

    More

    share()的作用

    我们用 userValidate 来控制用户名提示语是否隐藏以及密码输入框是否可用。share() 就是让他们两个共用userValidate,而不是为他们单独创建新的userValidate。这样可以减少不必要的开支。

    disposed(by: disposeBag) 是用来做什么的?

    和我们所熟悉的对象一样,每一个绑定也是有生命周期的。并且这个绑定是可以被清除的。disposed(by: disposeBag)就是将绑定的生命周期交给 disposeBag 来管理。当 disposeBag 被释放的时候,那么里面尚未清除的绑定也就被清除了。这就相当于是在用 ARC 来管理绑定的生命周期。 这个内容会在 Disposable 章节详细介绍。

    摘录来自: “RxSwift 中文文档。”

    相关文章

      网友评论

          本文标题:RxSwfit 学习笔记(一)登录校验

          本文链接:https://www.haomeiwen.com/subject/jazlectx.html