获取当年及以后的 Formik 验证

Question

我需要使用 Formik 进行验证，输入只能是 currentYear 及以上。

 const currentYear = new Date().getFullYear();

expiryYear: yup
.string()
.required('Select expiry year')
.min(4, `Invalid year format (Example: ${currentYear + 4})`)
.max(4, `Invalid year format (Example: ${currentYear + 4})`)
.when('startDate', (currentYear, schema) => currentYear && schema.min(currentYear)),

Answer 1

请试试这个：

yup.date()
 .min(new Date().getFullYear(),
 'Year must be current year or greater than current year');

勾选the demo

如果你想验证年份的长度，你可以使用这个：

yup.number()
.test('len', 'Must be exactly 4 characters', 
val => val && val.toString().length === 4 ).min(new Date().getFullYear());

这将首先验证年份的长度，然后检查它是否大于或等于当前年份。

Answer 2

我是这样做的：

import yup from 'yup';

//使用状态声明和定义区域

  const [year, setYear]= React.useState('');
let [yearError, setYearError]= React.useState(false)
 
//Validating year for being a number, not null and not beyong current year

  const YearValidator= yup.number().test(val => val !== '' && val.toString().length 
  === 4 ).max(new Date().getFullYear()).required();

//现在在这里传递年份值（由用户输入）进行验证

   const validYear = YearValidator.isValidSync(year);

//如果 validYear 不正确则显示错误..

yearError = validYear ? " year submitted" : "year is not valid";
    console.log(yearError);
    setYearError(yearError);

现在创建一个将事件更改作为参数的 handleYearChange() 函数，如下所示...

const handleYearChange = (event)=>{
    setYear(event.target.value);
  }

现在从用户输入 YEAR 值的 HTML 标签调用此函数

<div>
   <p className=""> Year of PassOut* </p>
      <input type="number" onChange={handlePassoutYearChange}/>
       <span> {yearError}</span>
  </div>

获取当年及以后的 Formik 验证

Get Formik Validation Current Year and Up

javascript

reactjs

yup

formik

react-material