时间戳

首页 > 解决方案 > React、Formik、Yup：如何格式化手机输入

reactjs - React、Formik、Yup：如何格式化手机输入

问题描述

我是 React 新手，我已经使用 React bootstrap、Formik 和 Yup 验证完成了一个多步骤表单。我想添加允许我在几个字段中格式化（或屏蔽）用户输入的功能。
在用户打字时，我想将手机输入格式化为这种格式：111-111-1111。要格式化的邮政编码：N0G 1A3。我怎么能做到这一点？有什么建议么？我需要添加任何库吗？我应该怎么办？

这是我做的代码：

export const step1Scehma = Yup.object({
firstName: Yup.string()
            .required("This field is required"),
lastName: Yup.string()
           .required("This field is required"),
email: Yup.string()
           .email()
           .required("Email is required"),
password: Yup.string()
             .required("This field is required")
             .matches(
              "^(?=.*[A-Za-z])(?=.*d)(?=.*[@$!%*#?&])[A-Za-zd@$!%*#?&]{8,}$",
              "Must Contain at least 8 Characters: One Uppercase, One Lowercase, One Number and one 
               special case Character"
              ),
phone: Yup.string()
           .required("This field is required")
});

export const Step1 = ({ formik }) => {
   const { handleChange, values, errors, touched } = formik;

return (
<React.Fragment>
  <Container>
    <Card.Title className="text-center">New User</Card.Title>
    <Card.Body>
      <Form.Group as={Col}>
        <Form.Label>First Name</Form.Label>
        <Form.Control
          type="text"
          name="firstName"
          onChange={handleChange}
          value={values.firstName}
          isValid={touched.firstName && !errors.firstName}
          isInvalid={!!errors.firstName}
          className={touched.firstName && errors.firstName ? "error" : null}
        />
        {touched.firstName && errors.firstName ? (<div className="error-message">{errors.firstName}</div>): null}
      </Form.Group>

      <Form.Group as={Col}>
        <Form.Label>Last Name</Form.Label>
        <Form.Control
          type="text"
          name="lastName"
          onChange={handleChange}
          value={values.lastName}
          isValid={touched.lastName && !errors.lastName}
          isInvalid={!!errors.lastName}
          className={touched.lastName && errors.lastName ? "error" : null}
        />
        {touched.lastName && errors.lastName ? (<div className="error-message">{errors.lastName}</div>): null}
      </Form.Group>

      <Form.Group as={Col} >
        <Form.Label>Email</Form.Label>
        <Form.Control
          type="text"
          name="email"
          onChange={handleChange}
          value={values.email}
          isValid={touched.email && !errors.email}
          isInvalid={!!errors.email}
          className={touched.email && errors.email ? "error" : null}
        />
        {touched.email && errors.email ? (<div className="error-message">{errors.email}</div>): null}
      </Form.Group>

      <Form.Group as={Col} >
        <Form.Label>Password</Form.Label>
        <Form.Control
          type="password"
          name="password"
          onChange={handleChange}
          value={values.password}
          isValid={touched.password && !errors.password}
          isInvalid={!!errors.password}
          className={touched.password && errors.password ? "error" : null}
        />
        {touched.password && errors.password ? (<div className="error-message">{errors.password}</div>): null}
      </Form.Group>
  
      <Form.Group as={Col} >
        <Form.Label>Phone Number</Form.Label>
        <Form.Control
          type="tel"
          name="phone"
          onChange={handleChange}
          value={values.phone}
          isValid={touched.phone && !errors.phone}
          isInvalid={!!errors.phone}
          className={touched.phone && errors.phone ? "error" : null}
        />
        {touched.phone && errors.phone ? (<div className="error-message">{errors.phone}</div>): null}
      </Form.Group>
    </Card.Body>
  </Container>
</React.Fragment>
);
};

标签： reactjsformikyup

解决方案

您可以使用https://github.com/sanniassin/react-input-mask

https://www.npmjs.com/package/react-input-mask

例子非常详细。我将它与 Yup 和 Material UI 一起使用。

<InputMask mask="999-999-9999" onChange={ handleChange } onBlur={ handleBlur } value={values.billing_phone} error={errors.billing_phone && touched.billing_phone} helperText={(errors.billing_phone && touched.billing_phone) && errors.billing_phone}>
    {(inputProps) => <TextField {...inputProps} className={classes.MuiInputBase} id="billing_phone" variant="outlined"  name="billing_phone" placeholder={addressObj.phone}  />}
</InputMask>

如果您不使用普通<input />元素，则必须像我一样包装元素。您可以在 NPM 页面上找到关于此的讨论。

推荐阅读