当字段中存在值时，如何向输入字段添加验证检查？答案

【问题标题】：How to add validation check to input field when we have value present in field?当字段中存在值时，如何向输入字段添加验证检查？
【发布时间】：2021-12-09 22:47:48
【问题描述】：

我有一个包含 3 个输入字段的表单，其中包含 FIRST NAME、LAST NAME、NUMBER。因此，一旦表单打开，就会有一组特定的预填充值来自后端。因此，如果我尝试为我的名字添加验证检查，并且如果用户将字段设为空白并单击提交，它会在控制台中显示我未定义相应名字的值。那么，有人可以帮助添加对名字、姓氏和数字的验证检查吗？？

const EditContact = inject('Contacts')(observer((props) => {
  const { text, Contactfirst, apptContacts } = props;
  const { updateContact } = apptContacts;
  const CMS = text.appointmentManager.editAppointmentContact;
  const [state, setState] = React.useState({
    data: {
      firstName: Contactfirst[0],
      lastName: Contactfirst[1],
      number: Contactfirst[2],
    },
    firstNameValid: '',
    lastNameValid: '',
    numberValid: '',
  });
  const handleTextareaChange = (event) => {
    const { data } = state;
    data[event.target.name] = event.target.value;
    setState({
      data,
    });
  };
  const valid = () => {
    if (state.data.firstName !== 'undefined') {
      setState({ firstNameValid: 'Required.Please enter your given name.' });
    }
  };
  const saveButton = () => {
    if (valid()) {
      const personName = `${state.data.firstName} ${state.data.lastName}`;
      const primaryContact = {
        name: personName,
        phoneNumber: state.data.number,
      };
    }
  };
  return (
    <div>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
        {CMS.heading1}
      </h1>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="givenName" name="firstName" label={CMS.name} onChange={handleTextareaChange} value={(state.data.firstName !== 'undefined') ? state.data.firstName : ''} />
      <p>{state.firstNameValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={(state.data.lastName !== 'undefined') ? state.data.lastName : ''} />
      <p>{state.lastNameValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
      <TextField id="mobileNumber" name="number" label={CMS.mobile} onChange={handleTextareaChange} value={(state.data.number !== 'undefined') ? state.data.number : ''} />
      <p>{state.numberValid}</p>
      <VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
      <ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => saveButton()} />
    </div>
  );
}));

export default EditContact ;

【问题讨论】：

也许这个链接会对你有所帮助：stackoverflow.com/questions/41296668/…

标签： javascript reactjs

【解决方案1】：

处理表单状态和验证是我们许多人都面临的问题。如果您无法自行解决问题，我建议您查看一个可以为您处理繁重工作的库。一个这样的库是 Formik https://formik.org/docs/overview

下面是一个简单的例子来说明它的实际作用： https://codesandbox.io/s/zkrk5yldz

【讨论】：

【解决方案2】：

如果您想为您的组件使用材质 ui，这很容易对您的文本字段应用验证。只需点击此链接 https://mui.com/components/text-fields/#validation

【讨论】：