记录一个自己写的用于验证表单数据的方法_如何写表单验证自己写-CSDN博客

本文链接：https://blog.csdn.net/qq8241994/article/details/103158764

本文分享了作者在React项目中编写的一个用于表单数据验证的通用方法，旨在提高代码复用性。该方法适用于TypeScript环境，已通过初步测试，欢迎反馈和讨论。

摘要由CSDN通过智能技术生成

在一个开发项目中表单的提交没有用到网上的插件或者组件，所以的话就想写一个用于验证的公共方法，以后也可以复用：

/**
 * 进行表单的基本验证
 * @param {IRule[]} rules 验证的规则数组
 * @param {IValues} values 表单数据对象
 */
export interface IRule{
    name: string;
    type: string;
    pattern?: RegExp;
    errMsg: string;
    required: boolean;
}

export interface IErrObj{
    name:string;
    msg:string;
}

export interface IValues{
    [prop:string]:any;
}

export function validate (rules:IRule[],values:IValues){
    if( rules.length <= 0) return;
    if( Object.keys(values).length <= 0 ) return;

    const valuesName = Object.keys(values);
    const needValidateRule = rules.filter(item => valuesName.includes(item.name));
    
    if(needValidateRule.length <= 0) return;

    const errObj:IErrObj={
        name:'',
        msg:'',
    };

    const flag = valuesName.every(valueItem => {
        return needValidateRule.every(ruleItem => {
            const { name, required = false, type = 'string', pattern, errMsg } = ruleItem;
            if(valueItem === name){
                if(typeof values[valueItem] !== 'object' && typeof values[valueItem] !== 'undefined' && typeof values[valueItem] !== type){
                    errObj.name = valueItem; 
                    errObj.msg = '类型错误';
                    return false;
                }
                if(typeof values[valueItem] === 'object' && type === 'array'){
                    if(!(values[valueItem] instanceof Array)){
                        errObj.name = valueItem; 
                        errObj.msg = '类型错误';
                        return false;
                    }
                }
                if(required && (values[valueItem] === '' || values[valueItem] == null)){
                    errObj.name = valueItem; 
                    errObj.msg = '该项为必填项';
                    return false;
                }
                if(pattern && !pattern.test(values[valueItem])){
                    errObj.name = valueItem; 
                    errObj.msg = errMsg || '该项填写错误';
                    return false;
                }
                return true;
            }
            return true;
        })
    })
    if(!flag){
        return errObj;
    }else {
        return true;
    }
}

以上是完整的代码，各位可以直接拷贝使用，我只是进行了初步的测试，如果各位发现有什么问题，欢迎评论