카테고리 없음

[Swift][iOS] 회원가입 화면 구현(1) - 아이디, 비밀번호 일치 유효성 검사

dev-seongsu 2022. 2. 23. 23:04

제가 만드는 회원가입 화면은 3개의 텍스트 필드가 존재합니다.

'ID','PASSWORD','PASSWORD CHECK'의 3개가 존재합니다.

이 글은 위 3개 텍스트필드에 값이 모두 채워지고, '비밀번호'와 '비밀번호 확인'이

일치해야 '다음' 버튼이 활성화되는 것을 구현합니다.

 

구현 하려는 회원가입 화면 - 모든 입력칸이 채워지고, '비밀번호'와 '비밀번호 확인'이 일치하면 '다음' 버튼 활성화

 

우선, 텍스트 필드 값 변경을 감지하고 유효성을 검사하여 '다음'버튼 색을 변경하는 코드입니다.

화면 세그 연결은 추후 예정.

//
//  SiginUpFirstViewController.swift
//  SignUp
//
//  Created by WG Yang on 2022/02/18.
//

import UIKit

class SiginUpFirstViewController: UIViewController,UITextFieldDelegate {

    @IBOutlet var textField_ID: UITextField!
    @IBOutlet var textField_Password: UITextField!
    @IBOutlet var textField_CheckPassword: UITextField!
    @IBOutlet var nextButton: UIButton!
    
    //두 텍스트필드 문자가 같은 지 확인.
    func isSameBothTextField(_ first: UITextField,_ second: UITextField) -> Bool {
        
        if(first.text == second.text) {
            return true
        } else {
            return false
        }
    }
    
    //텍스트 필드 입력값 변하면 유효성 검사
    @objc func TFdidChanged(_ sender: UITextField) {
        
        print("텍스트 변경 감지")
        print("text :", sender.text)
        
        //3개 텍스트필드가 채워졌는지, 비밀번호가 일치하는 지 확인.
        if !(self.textField_ID.text?.isEmpty ?? true)
            && !(self.textField_Password.text?.isEmpty ?? true)
            && isSameBothTextField(textField_Password, textField_CheckPassword) {
            updateNextButton(willActive: true)
        }
        else {
            
            updateNextButton(willActive: false)
        }
        
    }
    
    //'다음' 버튼 활성화/비활성화
    func updateNextButton(willActive: Bool) {
        
        if(willActive == true) {
            //다음 버튼 색 변경
            self.nextButton.setTitleColor(UIColor.blue, for: UIControl.State.normal)
            //다음 페이지 연결
            print("다음 버튼 활성화")
            
        } else {
            //다음 버튼 색 변경
            self.nextButton.setTitleColor(UIColor.gray, for: UIControl.State.normal)
            //다음 페이지 연결 해제
            print("다음 버튼 비활성화")
        }
    }
    
    //취소 버튼 클릭시
    @IBAction func popToPrev() {
        self.navigationController?.popViewController(animated: true)
    }
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        self.textField_ID.delegate = self
        self.textField_Password.delegate = self
        self.textField_CheckPassword.delegate = self
    
        //텍스트필드 입력값 변경 감지
        self.textField_ID.addTarget(self, action: #selector(self.TFdidChanged(_:)), for: .editingChanged)
        self.textField_Password.addTarget(self, action: #selector(self.TFdidChanged(_:)), for: .editingChanged)
        self.textField_CheckPassword.addTarget(self, action: #selector(self.TFdidChanged(_:)), for: .editingChanged)
    }

}

 

아래 블로그에 텍스트필드 변경을 감지하는 방법이 아주 자세히 설명되어 있습니다. 

2가지 방법이 존재하고, 저는 2번째 이벤트 감지 함수를 이용하여 해결하였습니다.

참고 블로그글: [swift] textField를 감지하는 버튼 만들기 - https://kirkim.github.io/swift/2021/12/11/backspace.html

 

[swift] textField를 감지하는 버튼 만들기

1️⃣ 목표

kirkim.github.io