Formik 数字字段只接受正数

Question

我有一个表格，其中有一个数字字段。我正在为此使用 formik。我需要一个只接受正数的输入。

这是codesandbox url

Answer 1

传递验证函数

// Synchronous validation
const validate = values => {
  const errors = {};

  if (!values.numberFied < 0) {
    errors.numberFied = 'Must be positive';
  }

  //...

  return errors;
};

Answer 2

您应该在数字输入的 onChange 事件中使用正则表达式示例代码：

const App = () => (
  <div className="app">
    <Formik
      initialValues={{ email: "", rank: -2 }}
      onSubmit={async values => {
        await new Promise(resolve => setTimeout(resolve, 500));
        alert(JSON.stringify(values, null, 2));
      }}
      validationSchema={Yup.object().shape({
        email: Yup.string()
          .email()
          .required("Required")
      })}
    >
      {props => {
        const {
          values,
          touched,
          errors,
          dirty,
          isSubmitting,
          handleChange,
          handleBlur,
          handleSubmit,
          handleReset,
          setFieldValue
        } = props;
        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="email" style={{ display: "block" }}>
              Email
            </label>
            <input
              id="email"
              placeholder="Enter your email"
              type="text"
              value={values.email}
              onChange={handleChange}
              onBlur={handleBlur}
              className={
                errors.email && touched.email
                  ? "text-input error"
                  : "text-input"
              }
            />
            <label htmlFor="email" style={{ display: "block" }}>
              Rank
            </label>
            <input
              id="rank"
              placeholder="Enter your email"
              type="number"
              value={values.rank}
              onChange={e => {
                e.preventDefault();
                const { value } = e.target;
                const regex = /^(0*[1-9][0-9]*(\.[0-9]*)?|0*\.[0-9]*[1-9][0-9]*)$/;
                if (regex.test(value.toString())) {
                  setFieldValue("rank", value);
                }
              }}
              onBlur={handleBlur}
            />
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </form>
        );
      }}
    </Formik>
  </div>
);

render(<App />, document.getElementById("root"));

代码沙箱 link: https://codesandbox.io/embed/formik-example-nut8p?fontsize=14&hidenavigation=1&theme=dark

Answer 3

您可以将属性 min 添加到您的输入中

<input
   id="rank"
   placeholder="Enter your rank"
   type="number"
   value={values.rank}
   min="1"
   onChange={handleChange}
   onBlur={handleBlur}
/>

Formik 数字字段只接受正数

Formik number field accept only positive numbers

reactjs

formik

传递验证函数