vue-form-check/index.js

表单验证

/**
 * @file 表单验证
 * @author donghongyan
 */

import check from './check-method';

const getType = value => {
    if (check.isNull(value)) {
        return 'null';
    }
    else if (!check.isDefined(value)) {
        return 'undefined';
    }
    else if (check.isString(value)) {
        return 'string';
    }
    else if (check.isBoolean(value)) {
        return 'boolean';
    }
    else if (check.isNumber(value)) {
        return 'number';
    }
    else if (check.isArray(value)) {
        return 'array';
    }
    else if (check.isRegExp(value)) {
        return 'regexp';
    }
    else if (check.isFunction(value)) {
        return 'function';
    }

    return 'object';
};

const deepFind = (value, key) => {
    const paths = key.split('.');
    let current = value;
    for (let i = 0, length = paths.length; i < length; ++i) {
        if (current[paths[i]] === undefined) {
            return undefined;
        }

        current = current[paths[i]];
    }
    return current;
};

/**
 * 依照配置项的顺序检查  depend -> type -> required -> callback -> rule
 *
 * @param {Object}  current 当前检查对象
 * @param {Object}  config 当前配置检查对象
 * @param {string}  config.alias 检查项别名
 * @param {string}  config.type 检查项类型
 * @param {boolean} config.required 检查项是否必须 true 检查；false 不检查
 					required 没有rule、callback的话，只检查非空；有rule、callback的话，加上非空一起检查
 					!required 不进行非空检查，有rule的话，进行正则检查，callback和rule只存在一个
 * @param {RegExp}  config.rule 正则检查，检查项规则
 * @param {Function} config.callback 灵活性校验规则 true 通过；false 不通过 比rule强，如区间校验
 * @param {Function} config.depend 校验先决条件 true 校验本项；false 不检验本项
 */
const checkForm = (current, config, callback) => {
    const keys = Object.keys(config);
    for (let i = 0, length = keys.length; i < length; i++) {
        const key = keys[i];
        const currentValue = deepFind(current, key);
        const currentRule = config[key];

        const isDepend = check.isFunction(currentRule.depend);
        const dependVal = isDepend && currentRule.depend();
        const typeVal = getType(currentValue) === currentRule.type;
        const isRequired = currentRule.required;
        const requiredVal = currentRule.required && !check.isEmpty(currentValue);
        const isCallback = check.isFunction(currentRule.callback);
        const callbackVal = isCallback && currentRule.callback(currentValue);
        const isRule = check.isRegExp(currentRule.rule);
        const ruleVal = isRule && currentRule.rule.test(currentValue);
        if (isDepend && !dependVal) {
            continue;
        }

        if (!typeVal) {
            return {alias: currentRule.alias, type: 'type'};
        }

        if (isRequired && !requiredVal) {
            return {alias: currentRule.alias, type: 'required'};
        }

        // 这里回调写rule，是因为callback是自定义验证和正则验证没区别
        if (isCallback && !callbackVal) {
            return {alias: currentRule.alias, type: 'rule'};
        }

        if (isRule && !ruleVal) {
            return {alias: currentRule.alias, type: 'rule'};
        }

    }
    return {};
};

const install = (Vue, options) => {
    Vue.prototype.$checkForm = checkForm;
};
// 使用时mixin引入，用到上下文参数
export default {
    install
};