iOS 로그인 화면 구성

 Login view

기본 Login 화면만 오토레이아웃으로 구현해보았습니다. 

기능

-아메일 형식이 아니면 경고문구 (조건 만족하면 경고문구 사라짐)

-비밀번호 8자리 미만일 경우 경고 문구 (조건 만족하면 경고문구 사라짐)

로그인 화면

위와 같이 간단하게 구현해 보았습니다. 이메일과 비밀번호를 적을 textFireld 2개 , 회원 가입 버튼 하나 이렇게 구성하였고 textfield 밑에 작게 경고문구를 입력하였습니다. 

 

이메일 형식이 맞는지 확인하는법

이메일과 비밀번호가 올바른 형식이면 경고문을 사라지게 만들어야 하기 때문에 다음과 같이 소스코드를 작성하였습니다. 

   func isValidEmail(email: String?) -> Bool {
        
        guard email != nil else { return false}
        
        let regEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}"
        let pred = NSPredicate(format: "SELF MATCHES %@", regEx)
        
        return pred.evaluate(with: email)
    }
    
    func isValidPassword(password: String?) -> Bool {
        if let hasPassword = password {
            if hasPassword.count < 8 {
                return false
            }
       }
         return true
    }

정규식을 통하여 올바른 형식인지 확인하는 함수를 작성하였습니다. 정규식은 구글에 검색하면 쉽게 나옵니다!!

 

그다음 작성한 함수를 이용하여 적용해보면 ...

    @objc func textFieldEdited(textField: UITextField) {
        
        if textField == emailTextField {
           // print("email \(textField.text!)")
            if isValidEmail(email: textField.text) == true {
                emailErrorHeight?.isActive = true
               
            }else {
                emailErrorHeight?.isActive = false
            }
        }else if textField == passwordTextField {
            //print("password \(textField.text!)")
            if isValidPassword(password: textField.text) == true {
                passwordErrorHeight?.isActive = true
            }else {
                passwordErrorHeight?.isActive = false
            }
        }
        UIView.animate(withDuration: 0.1) {
            self.view.layoutIfNeeded()
        }
    }

이렇게 작성할 수 있습니다. 유효하면 에러메세지의 높이를 변경하여 안보이게 설정하였습니다.,  유효하지 않으면 다시 원래 위치로 돌아옵니다. 

   override func viewDidLoad() {
        super.viewDidLoad()
        //textField 값이 변경되는걸 캐치
        emailTextField.addTarget(self, action: #selector(textFieldEdited), for: .editingChanged)
        passwordTextField.addTarget(self, action: #selector(textFieldEdited), for: .editingChanged)
        emailErrorHeight = emailError.heightAnchor.constraint(equalToConstant: 0)
        passwordErrorHeight = passwordError.heightAnchor.constraint(equalToConstant: 0)
    }

이렇게 텍스트필드에 addTarget을 해주면 로그인 화면 구성이 완료됩니다!