做畢設做到表單驗證，一堆if else if return寫得我頭皮發麻，又不喜歡某些元件中自帶的驗證，寫起來不自由，我火起來就自己封裝了一個表單驗證。

功能：暫時只支援判空和正則表示式，目前的畢設專案夠用了，後期若遇到需求會繼續加

封裝

const formvalidate = (arr) => {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].rules.required.value === true) {
            if (arr[i].data == null || arr[i].data == '') {
                arr[i].rules.required.callback()
                
 
return 0
            }
        }
        if (arr[i].rules.RegExp.value.test(arr[i].data) === false) {
            arr[i].rules.RegExp.callback()
            return 0
        }
        
    }
    return 1
}
export default formvalidate

使用
/* obj: {
    data, //待驗證的資料
    rules: { 
        //判空
        required: {
            value, //true為需要判空，false為不需要判空
            callback //若使用者未輸入時要執行的動作
        }, 
        //正則判斷
        RegExp: {
            value, //正則表示式
            callback //正則驗證不通過時要執行的動作
        }
    }
} 
 
*/

import formvalidate from './formvalidate'
const submit = formvalidate([
                {
                    data: values.nickname,
                    rules: {
                        required: {
                            value: true,
                            callback: () => {
                                Toast.info(
 
'請輸入您的稱呼', 1.5) //AntD Mobile的輕提示
                            }
                        },
                        RegExp: {
                            value: /^[\w\d\u4e00-\u9fa5_]{3,10}$/,
                            callback: () => {
                                Toast.info('您輸入的稱呼不合法', 1.5)
                            }
                        }
                    },
                },
                {
                    data: values.position,
                    rules: {
                        required: {
                            value: true,
                            callback: () => {
                                Toast.info('請輸入您的職位', 1.5)
                            }
                        },
                        RegExp: {
                            value: /^[\w\d\u4e00-\u9fa5_]{3,10}$/,
                            callback: () => {
                                Toast.info('您輸入的職位不合法', 1.5)
                            }
                        }
                    }
                },
                {
                    data: values.company,
                    rules: {
                        required: {
                            value: true,
                            callback: () => {
                                Toast.info('請輸入公司名稱', 1.5)
                            }
                        },
                        RegExp: {
                            value: /^[\w\u4e00-\u9fa5_]{5,20}$/,
                            callback: () => {
                                Toast.info('您輸入的公司名稱不合法', 1.5)
                            }
                        }
                    }
                },
                {
                    data: values.address,
                    rules: {
                        required: {
                            value: true,
                            callback: () => {
                                Toast.info('請輸入公司地址', 1.5)
                            }
                        },
                        RegExp: {
                            value: /^[\w\d\u4e00-\u9fa5_]{5,50}$/,
                            callback: () => {
                                Toast.info('您輸入的地址不合法', 1.5)
                            }
                        }
                    }
                }
            ])
            if (submit === 1) {
                Toast.info('提交')
            }

 舒服了