小程序实战(一)-设计一个表单校验函数

实战 › 小程序

一、需求说明

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

二、需求实现

2.1 确定结构

  1. 这个构造函数的输入参数有两个：rules 和 formData
1
2
3
4
5
function Validator(rules, formData) {
  let self = this
  self.rules = rules   // 校验规则
  self.formData = formData     // 表单对象
}
  1. 设计两个函数：单个字段校验函数 validateField，和整体校验函数 validate

2.2 实现单个字段校验函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 单个字段校验
  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 实现整体校验函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 整体校验
  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
  }

三、使用方式

  1. 定义一个表单对象：
1
2
3
4
5
data: {
  formData: {
    name: ''
  }
}
  1. 在生命周期函数中，初始化 validator 实例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)
}
  1. 需要校验的字段，绑定一个 blur 或 change 事件处理函数（这里以 blur 事件举例）。在这个函数中，调用实例的单个字段校验函数：
1
2
3
4
5
6
7
8
9
handleBlur(e, id) {
  let res = this.validator.validateField(id)
  if (!res.valid) {
    wx.showToast({
      title: res.msg,
      icon: 'none'
    })
  }
}
  1. 在表单提交的函数中，调用实例的整体校验函数：
1
2
3
4
5
handleSubmit() {
  let res = this.validator.validate()
  if (!res) return
  // 处理后续操作
}