小程序表单提交

input组件

需要借助bindinput事件来实现数据的双向绑定：

checkbox

设计模式的类型

结构型模式

行为型模式

涉及改善不同对象之间的通信，观察者模式

创建型模式

用于处理对象创建机制，单例模式

策略模式

定义了一系列的算法，并以一种可以互换的方式封装他们，而不需要其他的干涉。

新建validator.js，验证

const strategies = {
    //不能为空
    isNonEmpty(value, errMsg) {
        if (value === '') {
            return errMsg;
        }
    },
    //最小长度
    minLength(value, length, errMsg) {
        if (value.length < length) {
            return errMsg;
        }
    },
    //最大长度
    maxLength(value, length, errMsg) {
        if (value.length > length) {
            return errMsg;
        }
    }
}
class Validator {
    constructor() {
        this.cache = [];
    }
    add(value, rules) {
        rules.forEach(item => {
            let ary = item.strategy.split(':');
            this.cache.push(function () {
                const strategy = ary.shift();
                ary.unshift(value);
                ary.push(item.errMsg);
                return strategies[strategy](...ary);
            })
        })
    }
    start() {
        for (var i = 0, validataFunc; validataFunc = this.cache[i++];) {
            const msg = validataFunc();
            if (msg) {
                return msg;
            }
        }
    }
}

export default Validator;

使用：

import Validator from './../../utils/validator'
Page({
    data: {
        formData: {
            name: '',
            password: ''
        }
    },
    changeName(e) {
        this.setData({
            'formData.name': e.detail.value,
        })
    },
    changePassword(e) {
        this.setData({
            'formData.password': e.detail.value,
        })
    },
    formSubmit() {
        const validator = new Validator();
        validator.add(this.data.formData.name, [{
            strategy: 'isNonEmpty',
            errMsg: '用户名不能为空！'
        }, {
            strategy: 'minLength:2',
            errMsg: '用户名最小长度为2个字符！'
        }, {
            strategy: 'maxLength:10',
            errMsg: '用户名最大长度为10个字符！'
        }, ])
        const errMsg = validator.start();
        if (errMsg) {
            wx.showToast({
                title: errMsg,
                icon: 'none',
                image: '',
                duration: 1500,
                mask: true,
            });
            return;
        }
    } 
})

添加验证手机号不能为空：