提交前的 react-hook-form 验证

Question

我有一个表格（抱歉太长了），用户可以很简单地输入姓名、电子邮件、phone、评论：

    <form
        className={classes.root}
        data-testid="getting-started-form"
        onSubmit={handleSubmit(onSubmit)}
    >
        <div style={{ width: '400px' }}>
            <div style={{ width: '100%'}}>
                <Controller as={<TextField
                    label="Name"
                    id="name"
                    name="name"
                    type="text"
                    value={name}
                    placeholder="Name"
                    onChange={(e: React.FormEvent<EventTarget>) => {
                        let target = e.target as HTMLInputElement;
                        setName(target.value);
                    }}
                    inputProps={{
                        'data-testid': 'name'
                    }}
                />} name="name" rules={{ required: true }} control={control}
                />
                {errors.name && <span>Name is required</span>}
            </div>
            <div style={{ width: '100%' }}>
                <Controller as={<TextField
                    label="Email"
                    id="email"
                    name="email"
                    type="text"
                    value={email}
                    placeholder="Email"
                    style={{ width: '100%' }}
                    onChange={(e: React.FormEvent<EventTarget>) => {
                        let target = e.target as HTMLInputElement;
                        setEmail(target.value);
                    }}
                    inputProps={{
                        'data-testid': 'email'
                    }}
                />} name="email" rules={{ required: true, pattern: /^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$/i }} control={control}
                />
                {errors.email && <span>Email is required</span>}
            </div>
            <div style={{ width: '30%' }}>
                <Controller as={<TextField
                    label="Phone"
                    id="phone"
                    name="phone"
                    type="text"
                    value={phone}
                    placeholder="eg.15556667890"
                    onChange={(e: React.FormEvent<EventTarget>) => {
                        let target = e.target as HTMLInputElement;
                        setPhone(target.value);
                    }}
                    inputProps={{
                        'data-testid': 'phone'
                    }}
                />} name="phone" rules={{ pattern: /\d{11}/ }} control={control}
                />
            </div>
            <div style={{ width: '30%' }}>
                <Controller as={<TextField
                    label="Comments"
                    id="comments"
                    name="comments"
                    type="text"
                    value={comments}
                    placeholder="Comments"
                    rows={6}
                    multiline
                    onChange={(e: React.FormEvent<EventTarget>) => {
                        let target = e.target as HTMLInputElement;
                        setComments(target.value);
                    }}
                    inputProps={{
                        'data-testid': 'comments'
                    }}
                />} name="comments" control={control}
                />
            </div>
        </div>
        <Button
            type="submit"
            aria-label="submit getting-started-form"
            variant="contained"
            color="primary"
            data-testid="getting-started-form-submit-button"
        >
            Submit
        </Button>
    </form>

所有字段在提交时都经过验证。在提交表单之前，有没有办法让 react-hook-forms 进行某种验证？我想要像 Angular 这样的标志，用于表示肮脏、原始等

Answer 1

我没有使用过 react-hook-forms，但我使用过 onblur 事件处理程序在提交之前验证各个字段。

Answer 2

已更新！验证者 API：https://react-hook-form.com/api/.

您可以选择值 onBlur 而不是默认的 onSubmit 模式。

您可以在此处关注官方文档：https://react-hook-form.com/get-started#Registerfields.

基本上您需要 register 个字段进行验证。然后 react-hook-form 将在提交时自动为您验证。

Answer 3

要在提交之前进行验证，您可以使用 Controller 组件，在内部使用 rules 属性，如下所示：

<Controller
      name="name"
      control={control}
      defaultValue=""
      rules={{
          required: getRequired(t),
          validate: getValidation(t)          // <== Here you use validate
      }}
      render={({ onChange, onBlur, value }) => (
           <TextField
               error={Boolean(errors?.name)}
               helperText={errors?.name?.message}
               ...
            />
         )}
       />

查看 Controller

的官方文档示例

提交前的 react-hook-form 验证

react-hook-form validation before submission

material-ui

react-hook-form