npm install -d yup

use:

import * as Yup from 'yup'

ex 定義日期格式範例:

• Yup.Object ⇒ 繼承mixed所有方法,可定義多個對象
• Yup.number ⇒ 定義number架構
• default ⇒ 可給入schema預設值(可透過.cast()將schema轉為初始object)
• Moment().startOf('day').valueOf() ⇒ 透過Moment轉換時間格式,startOf('day')為當天起始時間
• Yup.ref() ⇒ 可以抓取指定schema值
• .cast() ⇒ 可將判斷schema轉為object格式,並帶入default預設資料
• shape() ⇒ 類似展開運算子

import * as Yup from 'yup';
import Moment from 'moment';
import Formik from 'formik'

export default () => {
	const schema = Yup.object({
		startTime: Yup.number().default(Moment().startOf('day').valueOf()),
		// 結束時間小於起始時間時顯示提示
		endTime: Yup.nember().min(Yup.ref('startTime'), '起始時間需小於結束時間').default(Moment().endOf('day').valueOf())
	})
	
	return (
		<Formik
			initialValues={schema.cast()}
			validationSchema={schema}
		>
		</Formik>
	)
}

.test() ⇒ 可以自定義驗證規則

• test ⇒ 驗證規則
• message ⇒ 錯誤訊息
• params ⇒ 宣告的值可帶入message中

const schema = Yup.object({
account: Yup.string().test({
	  test: value => /^[a-zA-Z0-9]$/.test(value),
		params: { number: 123 }
	  message: '禁止輸入特殊字元${number}'
	})
})

matches ⇒ 可用來匹配正規是校正

https://pjchender.dev/npm/npm-yup/#mixedtest用來建立自訂的驗證邏輯

const schema = Yup.object({
	account: Yup.string().matches(/[a-zA-Z0-9]/, '不可輸入特殊字元').required("Account為必填"),
})