[Swift实际操作]九、完整实例-(8)登录页面：创建自定义表单Row以及控制器

热烈欢迎，请直接点击！！！

进入博主App Store主页，下载使用各个作品！！！

注：博主将坚持每月上线一个新app！！！

本文将为你演示，如何知错自定义的表单行，表单行包含一个输入框和错误提示标签。

用于登录、注册以及其他需要表单的页面。

【New File】->【Cocoa Touch Class】创建新文件【FormRow.swift】

Name:FormRow

Subclass:UIView

Language:Swift

接着开始编写代码，完成自定义表单行的创建。

import UIKit
//定义一个枚举类型，表示表单中的输入框的类型，共5种
enum FieldType
{
    //手机
    case Tel
    //邮箱
    case Email
    //密码
    case Password
    //验证码
    case VerifyCode
    //昵称
    case NickName
}

//定义一个结构体类型
struct RegexHelper
{
    //添加一个正则表达式常量
    let regex: NSRegularExpression?
    //并添加一个初始化方法
    init(_ pattern: String)
    {
        //接着通过一个异常捕捉语句，
        do
        {
            //初始化一个正则表达式
            //并设置进行判断时，不区分英文字母的大小写
            regex = try NSRegularExpression(pattern: pattern, options: NSRegularExpression.Options.caseInsensitive)
        }
        catch
        {
            regex = nil
        }
    }

    //添加一个方法
    //使用正则表达式，对字符串进行匹配，并返回匹配的结果
    func match(_ input: String) -> Bool
    {
        //初始化一个范围常量
        let len = input.characters.count
        let range = NSMakeRange(0, len)
        //使用正则表达式，对字符串进行匹配，并返回匹配的结果
        if let matches = regex?.matches(in: input,
                                        options: .reportProgress,
                                        range: range)
        {
            return matches.count > 0
        }
        else
        {
            return false
        }
    }
}

//给当前的类添加一个文本框协议，用来实现对文本框输入时检测
class FormRow: UIView, UITextFieldDelegate {
    //初始化一个布尔变量，用来标识文本框的内容是否符合规则
    var isPass : Bool = false
    //依次初始化4个组件：1、显示文本框的标题
    var labelTitle : UILabel!
    //依次初始化4个组件：2、显示错误提示信息
    var labelError : UILabel!
    //依次初始化4个组件：3、输入框
    var inputField : UITextField!
    //依次初始化4个组件：4、分割线
    var line : UIView!
    //初始化一个视图控制器属性，
    //该属性的类文件将在后面创建
    weak var controller : BaseLoginRegViewController!
    //第一个属性：表示文本框的默认类型
    var valueType : FieldType = FieldType.Tel //0:tel, 1:email, 2:password  3:verifycode  4:username
    //第二个属性：表示正确的验证码
    var correctVerifyCode = ""
    //第三个属性：表示错误提示标签的显示区域
    var frameError : CGRect!

    //重写视图类的初始化方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        //初始化一个指定显示区域的标签对象
        let frameTitle = CGRect(x: 20, y: 0, width: frame.size.width-40, height: 20)
        labelTitle = UILabel(frame: frameTitle)
        //设置标签的文字颜色
        labelTitle.textColor = .white
        //设置标签的字体属性
        labelTitle.font = UIFont(name: "PingFang SC", size: 14)
        //并将标签添加到自定义视图
        self.addSubview(labelTitle)
        //初始化一个指定显示区域的文本输入框
        let frameInput = CGRect(x: 20, y: 20, width: frame.size.width-40, height: 40)
        inputField = UITextField(frame: frameInput)
        //设置输入框的代理
        inputField.delegate = self
        //设置输入框的字体颜色
        inputField.textColor = .white
        //设置输入框的清除按钮的模式
        inputField.clearButtonMode = .whileEditing
        //设置输入框的字体属性
        inputField.font = UIFont(name: "PingFang SC", size: 17)
        //并将输入框添加到自定义视图
        self.addSubview(inputField)
        //初始化一个具有白色背景的视图对象，作为表单行之间的分割线
        line = UIView(frame: CGRect(x: 20, y: 64, width: frame.size.width-40, height: 1))
        line.backgroundColor = UIColor.white
        self.addSubview(line)
        //初始化一个标签对象，用来在用户输入错误时显示提示信息
        frameError = CGRect(x: 20, y: 69, width: frame.size.width-40, height: 14)
        labelError = UILabel(frame: frameError)
        //设置标签的文字颜色
        labelError.textColor = UIColor(red: 255.0/255, green: 89.0/255, blue: 95.0/255, alpha: 1.0)
         //设置标签的字体属性
        labelError.font = UIFont(name: "PingFang SC", size: 10)!
        //默认情况下，错误标签处于隐藏状态
        labelError.isHidden = true
        self.addSubview(labelError)
        //添加一个通知，用来检测输入框种的内容发生变化时的事件
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(FormRow.enteringContent(_:)),
                                               name: NSNotification.Name.UITextFieldTextDidChange,
                                               object: nil)
    }

    //添加一个实例方法，用来获得输入框中的文字
    func getValue() -> String
    {
        return inputField.text!
    }

    //添加一个方法，用来设置自定义视图中的输入框的类型
    func setValueType(type : FieldType)
    {
        self.valueType = type
        //当类型为电话号码时
        if(type == .Tel)
        {
            //设置输入框的键盘类型
            self.inputField.keyboardType = UIKeyboardType.phonePad
             //设置输入框的标题文字
            self.labelTitle.text = "电话号码"
            
        }
        //当类型为邮箱时
        else if(type == .Email)
        {
             //设置输入框的键盘类型
            self.inputField.keyboardType = UIKeyboardType.emailAddress
            //设置输入框的标题文字
            self.labelTitle.text = "邮箱地址"
        }
        //当类型为密码时
        else if(type == .Password)
        {
             //设置输入框的键盘类型
            self.inputField.keyboardType = UIKeyboardType.URL
             //设置密文输入
            self.inputField.isSecureTextEntry = true
             //设置输入框的标题文字
            self.labelTitle.text = "密码"
        }
        //当类型为验证码时
        else if(type == .VerifyCode)
        {
            //设置输入框的键盘类型
            self.inputField.keyboardType = UIKeyboardType.numberPad
            //设置输入框的标题文字
            self.labelTitle.text = "验证码"
        }
        //当类型为昵称时
        else if(type == .NickName)
        {
            //设置输入框的键盘类型
            self.inputField.keyboardType = UIKeyboardType.namePhonePad
            //设置输入框的标题文字
            self.labelTitle.text = "用户昵称"
        }
    }

    //添加一个方法，用来判断输入框中的内容是否为空
    func checkIsNotBlank()
    {
        if self.getValue() != ""
        {
            //当值不为空时，设置布尔属性的值为真
            self.isPass = true
            //接着调用控制器对象的校验表单功能
            self.controller.checkForm()
        }
        else
        {
            //当值为空时，设置布尔属性的值为真，
            self.isPass = false
            //接着调用控制器对象的校验表单功能 
            self.controller.checkForm()
        }
    }

    //添加一个方法，用来对输入框的内容进行检验，
    //并返回布尔类型的结果
    func checkValue() -> Bool
    {
        //处理类型为电话号码时的情况
        if(self.valueType == .Tel)
        {
            //设置用来匹配电话号码的正则表达式字符串
            let pattern = "^1[0-9]{10}$"
            //并初始化一个正则匹配的结构体对象
            let matcher = RegexHelper(pattern)
            //对输入框中的内容进行匹配，
            if !matcher.match(self.getValue())
            {
                //并返回输入失败时的结果
                self.setError(info: "电话号码输入有误")
                return false
            }
        }
        //处理类型为电子邮箱时的情况
        else if(self.valueType == .Email)
        {
            //设置用来匹配电子邮箱的正则表达式字符串
            let pattern = "^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$"
            //并初始化一个正则匹配的结构体对象
            let matcher = RegexHelper(pattern)
            //对输入框中的内容进行匹配，
            let value = self.getValue()
            if !matcher.match(value)
            {
                //并返回输入失败时的结果
                self.setError(info: "邮箱地址输入有误")
                return false
            }
        }
         //处理类型为密码时的情况
        else if(self.valueType == .Password)
        {
            //设置用来匹配密码的正则表达式字符串
            let pattern = "^[a-z0-9_-]{6,16}$"
            //并初始化一个正则匹配的结构体对象
            let matcher = RegexHelper(pattern)
             //对输入框中的内容进行匹配，
            if !matcher.match(self.getValue())
            {
                 //并返回输入失败时的结果
                self.setError(info: "密码输入有误")
                return false
            }
        }
        //处理类型为验证码时的情况   
        else if(self.valueType == .VerifyCode)
        {
             //设置用来匹配验证码的正则表达式字符串
            let pattern = "^[0-9]{6,6}$"
            //并初始化一个正则匹配的结构体对象
            let matcher = RegexHelper(pattern)
            //对输入框中的内容进行匹配，
            if !matcher.match(self.getValue())
            {
                //并返回输入失败时的结果
                self.setError(info: "验证码输入有误")
                return false
            }
        }
        //处理类型为昵称时的情况
        else if(self.valueType == .NickName)
        {
            //设置用来匹配昵称的正则表达式字符串
            let pattern = "^[0-9_-a-zA-Z\\u4E00-\\u9FA5]{2,100}$"
            //并初始化一个正则匹配的结构体对象
            let matcher = RegexHelper(pattern)
            //对输入框中的内容进行匹配，
            if !matcher.match(self.getValue())
            {
                //并返回输入失败时的结果
                self.setError(info: "用户名称输入有误")
                return false
            }
        }
        //当执行到方法的末尾时，表示匹配成功，
        //此时设置自定义表单行的状态，
        self.setSuccess()
        //并返回值为真的结果
        return true
    }

    //添加一个方法，用来设置自定义表单行在匹配错误时的状态
    func setError(info : String)
    {
        //设置错误标签的内容
        self.isPass = false
        self.labelError.text = info
        //并显示错误标签
        self.labelError.isHidden = false
        //由于错误标签是通过动画来显示的，
        //所以在此对错误标签的显示区域和透明度进行初始化
        let rect = CGRect(x: frameError.origin.x, y: frameError.origin.y - 20, width: frameError.size.width, height: frameError.size.height)
        self.labelError.frame = rect
        self.labelError.layer.opacity = 0.0
        //设置标题颜色
        self.labelTitle.textColor = .white
        //设置输入框文字颜色
        self.inputField.textColor = .white
        //设置分割线的背景颜色
        self.line.backgroundColor = .white
        //使用视图的类方法，开始执行一段动画
        UIView.beginAnimations("switchToDaLu", context: nil)
        //并设置动画的时长为0.6秒
        UIView.setAnimationDuration(0.6)
        //在动画块中，更改动画标签的透明度
        self.labelError.layer.opacity = 1.0
        //在动画块中，更改动画标签的显示区域
        self.labelError.frame = self.frameError
        //修改标题颜色
        self.labelTitle.textColor = self.labelError.textColor
        //修改输入框文字颜色
        self.inputField.textColor = self.labelError.textColor
        //修改分割线的背景颜色
        self.line.backgroundColor = self.labelError.textColor
        //以上外观的变化，都以动画的形式，在0.63秒之内完成。
        UIView.commitAnimations()
        //最后结束视图的动画块
        self.controller.checkForm()
    }

    //添加一个方法，用来设置自定义表单行在匹配成功时的状态
    func setSuccess()
    {
        //在上一个方法种，是通过视图动画块的方式创建动画的，
        //在当前方法种，你将通过闭包的方式，创建一个动画。
        //同时在动画结束时，隐藏错误标签
        UIView.animate(withDuration: 0.6, delay: 0.0, options: .curveLinear, animations: {
            
            self.isPass = true
            //初始化一个范围对象，作为错误标签的起始位置
            let rect = CGRect(x: self.frameError.origin.x, y: self.frameError.origin.y - 20, width: self.frameError.size.width, height: self.frameError.size.height)
            //将错误标签移至起始位置，并设置不透明度为0
            self.labelError.frame = rect
            self.labelError.layer.opacity = 0.0
            //修改标题颜色
            self.labelTitle.textColor = .white
            //设置输入框文字颜色
            self.inputField.textColor = .white
            //设置分割线的背景颜色
            self.line.backgroundColor = .white
            //对控制器种的所有表单行进行校验
            self.controller.checkForm()
            
        }, completion: { finished in
         //同时在动画结束时，隐藏错误标签
            self.labelError.isHidden = true
        })
    }

    //添加一个协议方法，用来监听输入框开始编辑的事件
    func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
        
        self.controller.focusedFieldType = self.valueType
        
        return true
    }

    //继续添加一个来自协议的方法，用来监听输入框的内容发生变化时的事件
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        //将输入框右侧的删除图标的颜色进行修改，将其颜色变亮。
        let count = inputField.subviews.count
        
        if count >= 2
        {
            let bt = inputField.subviews[1] as! UIButton
            bt.imageView?.image = bt.imageView?.image?.blendColor(.white, blendMode: .destinationIn)
        }
        //当类型为密码时，最多允许输入11个字符
        var maxNum = 11
        if(self.valueType == .Password)
        {
            maxNum = 16
        }
        //当类型为验证码时，最多允许输入6个字符
        else if(self.valueType == .VerifyCode)
        {
            maxNum = 6
        }
        //当类型为昵称时，最多允许输入100个字符
        else if(self.valueType == .NickName)
        {
            maxNum = 100
        }
        //当类型为邮箱时，最多允许输入100个字符
        else if(self.valueType == .Email)
        {
            maxNum = 100
        }
        //获得输入框中已有的内容
        let txt = textField.text
        let str = "\(txt!)\(string)"
        //判断当输入框种的已有内容的长度大于或等于最大值时，
        //输入框不再接入字符的输入
        if str.lengthOfBytes(using: .utf8) <= maxNum
        {
            return true
        }
        else
        {
            return false
        }
    }

    //添加一个方法，用来响应通知。
    //当收到输入框中的内容发生变化的通知时，
    //对输入框的内容是否为空进行校验
    func enteringContent(_ notification: Notification?)
    {
        self.checkIsNotBlank()
    }
    //添加一个必须实现的初始化方法
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    //最后添加一个解析方法，
    //当自定义表单行对象被从内存清除之前，移除刚刚创建的通知。
    deinit {
        NotificationCenter.default.removeObserver(self)
    }
}

【New File】->【Cocoa Touch Class】创建新文件【BaseLoginRegViewController.swift】

Name:BaseLoginRegviewController

Subclass:BaseViewController

Language:Swift

接着开始编码，完成基类的创建

import UIKit

class BaseLoginRegViewController: BaseViewController {
    //首先添加一个属性，表示当前处于焦点状态时的表单行的类型。
    var focusedFieldType : FieldType = .Password
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        //隐藏顶部的导航栏
        self.navigationController?.setNavigationBarHidden(true, animated: false)
        //隐藏左上角的关闭按钮
        self.dismissBt.isHidden = true
        //给根视图添加一个手势，当根视图被点击时，隐藏已经打开的键盘
        self.view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(BaseLoginRegViewController.hideKeyboard)))
    }

    //添加一个方法，来响应根视图的手势事件
    func hideKeyboard()
    {
        self.view.endEditing(true)
    }

    //最后添加一个方法，用来对页面中的所有表单进行检验，
    //该方法将在子类中进行重写
    func checkForm()
    {
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}