用戶
 找回密碼
 立即注冊

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空間
收藏
原作者: 張大鵝和鄭小狗 來自: 掘金
河北20选5大星走势图