验证电子邮件输入字段表单元素

Question

可以使用react-hook-form验证以逗号分隔的多封电子邮件。 所以我有一个material-ui文本字段，它使用react-hook-form进行验证..

初始输入字段需要一封电子邮件，并由react-hook-form进行验证。 目前，我希望用户能够输入以逗号分隔的多封电子邮件，并验证每封电子邮件。 目前我能做的是在用户单击提交时进行验证，但是，我希望能够在用户键入电子邮件时进行验证。

<TextField
            onChange={(e) => {
            validateRecipientEmail(e.target.value);
          }}
            name='recipientEmail'
            placeholder='[email protected]'
            fullWidth
            inputRef={register({
              required: true,
             
            })}
            error={errors.recipientEmail && true}
          />
          {errors.recipientEmail && (
            <Typography variant='caption' className={Type.textError}>
              Invalid email address
            </Typography>
          )}

我找到了一种通过使用 onChange 事件侦听器进行验证来实现预期目标的方法。 但在进行验证并在屏幕上填充错误之后。当输入字段没有焦点时，错误消失。

以下是我的验证

const validateRecipientEmail = (value) => {
let currentEmails = value.split(',').filter((e) => e && e.trim());
let regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]+$/i;
for (let i = 0; i < currentEmails.length; i++) {
  if (!regex.test(currentEmails[i].replace(/\s/g, ''))) {
    setrecipientEmailErrorMessage(
      `Enter valid Email(s) seperated by comma (,)`
    );
    setError('recipientEmail', {
      type: 'manual',
    });
  }
}

if (currentEmails.length > 10) {
  setrecipientEmailErrorMessage(`Emails should not be more than 10`);
  setError('recipientEmail', {
    type: 'manual',
  });
}
  };

Answer 1

所以我发现你可以传递一个函数来验证属性，这可以解决我的问题

<TextField
          name='recipientEmail'
          placeholder='Eg. [email protected]'
          inputRef={register({
            required: true,
            validate: {
              validEmail: (value) => {
                let currentEmails = value
                  .split(',')
                  .filter((e) => e && e.trim());
                let regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]+$/i;
                for (let i = 0; i < currentEmails.length; i++) {
                  if (!regex.test(currentEmails[i].replace(/\s/g, ''))) {
                    return false;
                  }
                }
              },
              emailLength: (value) => {
                let currentEmails = value
                  .split(',')
                  .filter((e) => e && e.trim());
                if (currentEmails.length > 10) {
                  return false;
                }
              },
            },
          })}
          error={errors.recipientEmail && true}
          fullWidth
        />

“validEmail”验证电子邮件并 “emailLength”验证电子邮件长度 谢谢你