前言

我们再在小程序经常使用表单验证功能，但是如果重复书写相同的验证代码会很麻烦，所以我们可以封装一个验证类。

validate.js

const numberReg = /^-?[1-9][0-9]?.?[0-9]*$/    //数字正则
const phoneReg = /^1[0-9]{10,10}$/  //手机号正则

// 策略对象
let strategys = new Map([
  //判断是否为空
  ['isEmpty', (value, errorMsg) => {
    if (value === '') {
      return errorMsg;
    }
  }],
  // 限制最小长度
  ['minLength', (value, length, errorMsg) => {
    if (value.length < length) {
      return errorMsg;
    }
  }],
  // 限制最大长度
  ['maxLength', (value, length, errorMsg) => {
    if (value.length > length) {
      return errorMsg;
    }
  }],
  // 手机号码格式
  ['phone', (value, errorMsg) => {
    if (!phoneReg.test(value)) {
      return errorMsg;
    }
  }],
  //判断数字
  ['number', (value, errorMsg) => {
    if (!numberReg.test(value)) {
      return errorMsg;
    }
  }]
])

class Validator {
  constructor() {
    this.cache = []; //保存校验规则
  }

  addRule(data, rules) {
    var self = this;
    for (let rule of rules) {
      if (!rule || !rule.name || !rule.strategy) {
        continue
      }
      let strategyAry = rule.strategy.split(":");
      self.cache.push(function () {
        let strategy = strategyAry.shift();
        let errmsg = rule.errmsg;
        strategyAry.unshift(data[rule.name]);
        strategyAry.push(errmsg);
        return strategys.get(strategy).apply(data, strategyAry);
      });
    }
  }

  check() {
    let res = {
      isOk: true,
      errmsg: ''
    }
    for (let i = 0, fn; fn = this.cache[i++];) {
      let msg = fn(); // 开始效验 并取得效验后的返回信息
      if (msg) {
        res = {
          isOk: false,
          errmsg: msg
        };
        break;
      }
    }
    return res
  }
}

/**
 * 工厂模式，便于后期维护
 */
function getValidator() {
  let validator = new Validator()
  return validator
}

export default getValidator

app.js

import getValidator from './utils/validate';
App({
  getValidator: getValidator
})

const app = getApp()

Page({
  onShow() {
    let validator = app.getValidator()
    let data = {
      username: '323232223'
    }
    validator.addRule(data, [{
        name: 'username',
        strategy: 'isEmpty',
        errmsg: '用户名不能为空'
      },
      {
        name: 'username',
        strategy: 'minLength:6',
        errmsg: '用户名长度不能小于6位'
      },
      {
        name: 'username',
        strategy: 'maxLength:8',
        errmsg: '用户名长度不能大于8位'
      }
    ]);
    console.log(validator.check());
  }
})