时间戳

首页 > 解决方案 > 使用 react formik 进行空间验证

reactjs - 使用 react formik 进行空间验证

问题描述

index.js

<div className="form-group">
  <label htmlFor='product_name'>Product Name:</label>
  <input type="text" name="product_name" placeholder="Enter Product Name" className="form-control"
    onChange={formik.handleChange} onBlur={formik.handleBlur} />
  {
    formik.touched.product_name && formik.errors.product_name && formik.values.product_name.length > 0 ? (
      <div className='error'>{formik.errors.product_name}</div>) : null
  }
</div>

我正在使用带有 react 的 formik 进行验证，但是当我输入空格时，它会验证表单，但我想要如果只有空格，它不会验证，直到有一些文本。谁能帮我吗

标签： reactjsreact-reduxformikyup

解决方案

你可以试试这个：

  {
    formik.touched.product_name && formik.errors.product_name && formik.values.product_name.trim().length > 0 && formik.values.product_name.length > 0 ? (
      <div className='error'>{formik.errors.product_name}</div>) : null
  }

这应该可以解决您的问题：formik.values.product_name.trim().length > 0

推荐阅读