一、需求说明

设计一个构造函数来完成任务
有三种类型校验：是否必填、最大最小长度、正则校验
当用户输入值时可触发单个字段校验，实时提示
当提交表单时可校验整个表单

二、需求实现

2.1 确定结构

这个构造函数的输入参数有两个：rules 和 formData

function Validator(rules, formData) {
  let self = this
  self.rules = rules   // 校验规则
  self.formData = formData     // 表单对象
}

设计两个函数：单个字段校验函数 validateField，和整体校验函数 validate

2.2 实现单个字段校验函数

// 单个字段校验
  Validator.prototype.validateField = function(key) {
    let value = formData[key]
    if (rules[key] && rules[key].length) {
      for (let i = 0; i < rules[key].length; i++) {
        let rule = rules[key][i]
        if (rule.required) {
          // 必填校验
          if (!value) {
            return {
              valid: false,
              msg: rule.message
            }
          }
        } else if (rule.max || rule.min) {
          // 最大最小长度校验
          if (value && (value.length > rule.max || value.length < rule.min)) {
            return {
              valid: false,
              msg: rule.message
            }
          }
        } else if (rule.pattern && value) {
          // 正则校验
          let reg = new RegExp(rule.pattern)
          if (!reg.test(value)) {
            return {
              valid: false,
              msg: rule.message
            }
          }
        }
      }
    }
    return {
      valid: true
    }
  }

2.3 实现整体校验函数

// 整体校验
  Validator.prototype.validate = function() {
    let res = []
    Object.keys(rules).forEach(key => {
      res.push(handleEachValidate(key))
    })
    for (let i = 0; i < res.length; i++) {
      if (!res[i].valid) {
        wx.showToast({
          title: res[i].msg,
          icon: 'none'
        })
        return false
      }
    }
    return true
  }

三、使用方式

定义一个表单对象：

data: {
  formData: {
    name: ''
  }
}

在生命周期函数中，初始化 validator 实例：

onReady(){
  this.initValidator()
},
// 初始化实例
initValidator() {
  let rules = {
    name: [
      {required: true, message: '请填写姓名', trigger: handleBlur},
      {min: 2, max: 20, message: '姓名大于2个字符，小于20个字符', trigger: handleBlur},
      {pattern: /[\u4E00-\u9FA5]/g, message: '姓名必须是汉字', trigger: handleBlur}
    ]
  }
  this.validator = new Validator(rules, this.data.formData)
}

需要校验的字段，绑定一个 blur 或 change 事件处理函数（这里以 blur 事件举例）。在这个函数中，调用实例的单个字段校验函数：

handleBlur(e, id) {
  let res = this.validator.validateField(id)
  if (!res.valid) {
    wx.showToast({
      title: res.msg,
      icon: 'none'
    })
  }
}

在表单提交的函数中，调用实例的整体校验函数：

handleSubmit() {
  let res = this.validator.validate()
  if (!res) return
  // 处理后续操作
}

<关于我们>

我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。

这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。

目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入

另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里

如文章有错误或表述不清晰，欢迎各位留言反馈~~