使用React Formik在React中进行空间验证

问题描述

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>

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

解决方法

您可以尝试以下方法：

  {
    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

,

使用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>
  );
}

HTML5 spec