使用 react formik 进行空间验证答案

【问题标题】：Space validation in react using react formik使用 react formik 进行空间验证
【发布时间】：2021-02-09 14:00:51
【问题描述】：

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 进行验证，但是当我输入空格时，它会验证表单，但我想要如果只有空格，它直到有一些文本才会验证。谁能帮帮我

【问题讨论】：

标签： reactjs react-redux formik yup

【解决方案1】：

你可以试试这个：

  {
    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

【讨论】：

表单仍然会提交。当product_name 没有非空格字符时，这只会隐藏错误。除非我误解了这个问题。

【解决方案2】：

使用Yup.string().trim():

import * as Yup from "yup";
import React from "react";
import { Form, Formik } from "formik";

export default function App() {
  return (
    <Formik
      initialValues={{ product_name: "" }}
      onSubmit={(values) => console.log(values)}
      validationSchema={Yup.object({
        product_name: Yup.string().trim().required()
      })}
    >
      {(formik) => (
        <Form>
          <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 ? (
              <div className="error">{formik.errors.product_name}</div>
            ) : null}
          </div>
        </Form>
      )}
    </Formik>
  );
}

https://codesandbox.io/s/wispy-smoke-ctzvz?file=/src/App.js:0-1050

【讨论】：