用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2020-6-2 00:45

一、需求说明 设计一个构造函数来完成任务 有三种类型校验:是否必填、最大最小长度、正则校验 当用户输入值时可触发单个字段校验,实时提示 当提交表单时可校验整个表单 二、需求实现 2.1 确定结构 这个构造函数 ...

一、需求说明

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

二、需求实现

2.1 确定结构

  1. 这个构造函数的输入参数有两个:rules 和 formData
function Validator(rules, formData) {
  let self = this
  self.rules = rules   // 校验规则
  self.formData = formData     // 表单对象
}
复制代码
  1. 设计两个函数:单个字段校验函数 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
  }
复制代码

三、使用方式

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 张大鹅和郑小狗 来自: 掘金