1

我创建了登录表单，其中包含 DOB 和 PHONE 字段。用户必须在哪里键入它。键入时应将值屏蔽为 DOB 格式 (YYYY-MM-DD)，将电话格式屏蔽为 (999) 999-9999。我使用材料 ui 进行 TextFied 和 react-hook-form 进行表单验证。我可以通过在 KeyUp 上提供正则表达式来实现某些功能。但它接受数字字段中的字母。在这里，我在 CodeSandbox 中添加了示例：https ://codesandbox.io/s/react-material-ui-login-tdcoh

而且我在这里粉碎代码。请帮我解决一下这个。

提前致谢

import React from "react";
import {Paper,withStyles,Grid,TextField,Button,FormControlLabel,Checkbox } from "@material-ui/core";
import { Face, Fingerprint } from "@material-ui/icons";
import { useForm } from "react-hook-form";
const styles = theme => ({
  margin: {
    margin: theme.spacing.unit * 2
  },
  padding: {
    padding: theme.spacing.unit
  }
});
const LoginTab = () => {
  const { handleSubmit, register, errors, reset } = useForm({
    mode: "onChange"
  });
const onSubmit = values => {
    alert(JSON.stringify(values));
  };

  return (

        <form onSubmit={handleSubmit(onSubmit)}>
          <Grid container spacing={8} alignItems="flex-end">
            <Grid item>
              <Face />
            </Grid>
            <Grid item md={true} sm={true} xs={true}>
              <TextField
                id="dob"
                label="DOB"
                name="dob"
                onKeyUp={e => {
                  var v = e.target.value;
                  if (v.match(/^\d{4}$/) !== null) {
                    e.target.value = v + "/";
                  } else if (v.match(/^\d{4}\/\d{2}$/) !== null) {
                    e.target.value = v + "/";
                  }
                }}
                inputRef={register({
                  required: "FIELD_REQUIRED_MESSAGE",
                  pattern: {
                    value: /(\d{2})-(\d{2})-(\d{4})/,
                    message: "Please enter a correct DOB pattern."
                  }
                })}
              />
              {errors.dob && <p>{errors.dob.message}</p>}
            </Grid>
          </Grid>
          <Grid container spacing={8} alignItems="flex-end">
            <Grid item md={true} sm={true} xs={true}>
              <TextField
                id="username"
                label="PHONE"
                name="phone"
                onKeyUp={e => {
                  let x = e.target.value
                    .replace(/\D/g, "")
                    .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
                  e.target.value = !x[2]
                    ? x[1]
                    : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
                }}
                inputRef={register({
                  required: "FIELD_REQUIRED_MESSAGE",
                  pattern: {
                    value: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
                    message: "PHONE_VALIDATION_PATTERN_MESSAGE"
                  }
                })}
              />
              {errors.phone && <p>{errors.phone.message}</p>}
            </Grid>
          </Grid>
          <Grid container alignItems="center" justify="space-between">
            <Grid item>
              <FormControlLabel
                control={<Checkbox color="primary" />}
                label="Remember me"
              />
            </Grid>
            <Grid item>
              <Button
                disableFocusRipple
                disableRipple
                style={{ textTransform: "none" }}
                variant="text"
                color="primary"
              >
                Forgot password ?
              </Button>
            </Grid>
          </Grid>
          <Grid container justify="center" style={{ marginTop: "10px" }}>
            <Button
              variant="outlined"
              color="primary"
              type="submit"
              style={{ textTransform: "none" }}
            >
              Login
            </Button>
          </Grid>
        </form>

  );
};

export default withStyles(styles)(LoginTab);
4

0 回答 0