Question

我正在对具有名字，姓氏和用户名的表单使用Formik和Yup验证。用户名不应包含空格，因此我正在使用onChange事件和值。 Yup验证适用于名字和姓氏，但不适用于用户名。记录我的值时，发现用户名没有更新。我是新手，请帮帮我。预先感谢。

const CustomTextInput =({label, ...props}) =>{
  const [field, meta] = useField(props);

  return(
    <>
    <label className="required" htmlFor={props.id || props.name}>{label}</label>
    {meta.touched && meta.error ? (
      <div className="error">{meta.error}</div>
    ):null}
    <input className="text-input" {...field} {...props}/>
    </>
  )
}

function App(){
const [regnum, Setreg]= useState("");

function avoid(e){
  Setreg(e.target.value.replace(/\s+/g,''));
}

return(
    <Styles>
      <Formik
      initialValues={{
        firstname:'',
        lastname: '',
        username:'',
        phone1:'',
        email:''
      }}
      validationSchema={
        Yup.object({
          firstname: Yup.string()
            .required('Required'),
          lastname: Yup.string()
            .required('Required'),
          username: Yup.string()
            .min(4,"Username should be greater than 4 characters")
            .max(15,"Wooah! Username cannot be that big")
            .required('Required'),
         })
      }
 onSubmit= {(values, { setSubmitting , resetForm }) => {
        
            setTimeout(()=>  {
                //My api call here
             resetForm()
             setSubmitting(false);
            },2000)
            }
            }>

{props => (
          <Form>
           <CustomTextInput label="First Name" name="firstname" type="text" placeholder="first Name"/>
           <CustomTextInput label="Last Name" name="lastname" type="text" placeholder="Last Name"/>
           <CustomTextInput label="UserName" name="username" type="text" value={regnum} onChange={(event)=>avoid(event)} placeholder="Spaces will be removed"/> 
<div>
            <button type="submit" >{props.isSubmitting ? "Loading..." : "Submit"}</button>
            </div> 

</Form>
</Formik>
    </Styles>
    );
}

export default App;

Answer 1

问题是，您是否要阻止用户使用带空格的用户名？如果是这样，最简单的方法就是通过yup。

  validationSchema={
    Yup.object({
      firstname: Yup.string()
        .required('Required'),
      lastname: Yup.string()
        .required('Required'),
      username: Yup.string()
        .required('Required').matches("/\s/", "Cannot contain spaces"),
     })
  }

否则，如果允许用户使用空格写用户名，但是出于任何原因都希望没有空格，则必须在submitHandler中处理数据。

通过为用户名提供自定义的onChange处理函数，您可以覆盖formik，因为formik在后台使用了onChange。在提交之前，在SubmitHandler中处理数据，让formik做到这一点。

更新初始值格式中的特定值

1 个答案: