yup 自定义校验逻辑(test函数)

GitHub - jquense/yup: Dead simple Object schema validation

import * as yup from 'yup'
import moment from 'moment'

//after today
const dateTestAfterToday = function (value) {
  const now = moment(Date.now()).format('YYYY-MM-DD')
  if (moment(value).valueOf() <= moment(now).valueOf()) {
    return false
  } else {
    return true
  }
}

//after other day
const dateTestAfterOtherDay = function (field) {
  return function (value, context) {
    if (context.parent[field] && moment(value).valueOf() <= moment(context.parent[field]).valueOf()) {
      return false
    } else {
      return true
    }
  }
}

//before other day
const dateTestBeforeOtherDay = function (field) {
  return function (value, context) {
    if (context.parent[field] && moment(value).valueOf() >= moment(context.parent[field]).valueOf()) {
      return false
    } else {
      return true
    }
  }
}


const getValidationSchema = () => {
  const requireMsg = 'This is a required field';
  const dateTestAfterTodayMsg = 'Please select a date after today';
  const dateTestAfterOtherDayMsg = 'Please select a date after the start date';
  const dateTestBeforeOtherDayMsg = 'Please select a date before the end date';
  const validationSchema = yup.object({
    costStopDate: yup
      .string()
      .trim()
      .required(requireMsg)
      .test('costStopDate', dateTestAfterTodayMsg, dateTestAfterToday)
      .test(
        'costStopDate',
        dateTestAfterOtherDayMsg,
        dateTestAfterOtherDay('costStartDate')
      ),
    costStartDate: yup
      .string()
      .trim()
      .required(requireMsg)
      .test(
        'costStartDate',
        dateTestBeforeOtherDayMsg,
        dateTestBeforeOtherDay('costStopDate')
      ),
  });

  return validationSchema;
};

在React中,校验一个循环生成的表单提交可以通过以下步骤实现: 1. **收集表单数据**:首先,你需要收集表单中的所有数据。通常可以通过`useState`钩子来存储表单数据。 2. **循环生成表单字段**:使用`map`方法循环生成表单字段,并为每个字段添加`name`属性,以便后续识别。 3. **验证表单数据**:在表单提交时,遍历收集到的数据并进行验证。可以使用自定义的验证函数,也可以使用第三方库如`Yup`进行验证。 4. **显示错误信息**:如果验证失败,显示相应的错误信息。 以下是一个简单的示例代码,展示了如何在React中实现循环表单的校验: ```jsx import React, { useState } from 'react'; const LoopForm = () => { const [formData, setFormData] = useState([ { name: '', email: '' }, ]); const [errors, setErrors] = useState({}); const handleChange = (index, field, value) => { const newFormData = [...formData]; newFormData[index][field] = value; setFormData(newFormData); }; const validate = () => { const newErrors = {}; formData.forEach((item, index) => { if (!item.name) { newErrors[`name_${index}`] = 'Name is required'; } if (!item.email) { newErrors[`email_${index}`] = 'Email is required'; } else if (!/\S+@\S+\.\S+/.test(item.email)) { newErrors[`email_${index}`] = 'Email is invalid'; } }); setErrors(newErrors); return Object.keys(newErrors).length === 0; }; const handleSubmit = (e) => { e.preventDefault(); if (validate()) { // Submit the form data console.log('Form Data', formData); } }; return ( <form onSubmit={handleSubmit}> {formData.map((item, index) => ( <div key={index}> <div> <label>Name:</label> <input type="text" name={`name_${index}`} value={item.name} onChange={(e) => handleChange(index, 'name', e.target.value)} /> {errors[`name_${index}`] && <p>{errors[`name_${index}`]}</p>} </div> <div> <label>Email:</label> <input type="email" name={`email_${index}`} value={item.email} onChange={(e) => handleChange(index, 'email', e.target.value)} /> {errors[`email_${index}`] && <p>{errors[`email_${index}`]}</p>} </div> </div> ))} <button type="submit">Submit</button> </form> ); }; export default LoopForm; ``` 在这个示例中: 1. **收集表单数据**:使用`useState`钩子来存储表单数据。 2. **循环生成表单字段**:使用`map`方法循环生成表单字段,并为每个字段添加`name`属性。 3. **验证表单数据**:在`validate`函数中,遍历表单数据并进行验证。 4. **显示错误信息**:如果验证失败,显示相应的错误信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐同保

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值