以反应钩子形式验证？答案

【问题标题】：validation in react hook form?以反应钩子形式验证？
【发布时间】：2021-07-18 05:47:26
【问题描述】：

我有一个表单，我想在其中一个输入上进行验证，我使用 react hook form 。这是我要应用的验证：

const validateSheba=(str)=> {
    var pattern = /IR[0-9]{24}/;
    
    if (str.length !== 26) {
      return false;
    }
  
    if (!pattern.test(str)) {
      return false;
    }
  
    var newStr = str.substr(4);
    var d1 = str.charCodeAt(0) - 65 + 10;
    var d2 = str.charCodeAt(1) - 65 + 10;
    newStr += d1.toString() + d2.toString() + str.substr(2, 2);
    
    var remainder = this.iso7064Mod97_10(newStr);
    if (remainder !== 1) {
      return false;
    }
  
    return true;
  };

我就是这样使用它的：

                <Input
                name="Sheba"
                placeholder="  شماره شبای بانکی"
                ref={register({
                    required: true,
                    pattern: {
                      value:value=> validateSheba(value),
                      message: "نا معتبر",
                    },
                  })}
                  error={errors?.Sheba ? true : false}
                  helperText={errors?.Sheba?.message}
                inputClassName={classes.input}
              ></Input>

它不起作用..我该怎么做？

【问题讨论】：

您是否尝试将register({ ... }) 更改为...register({ ... })？
可以，但是不行
能否将可执行代码分享给stackbiltz或codesandbox？

标签： reactjs react-hooks react-hook-form

【解决方案1】：

在您的情况下，您使用的是验证函数，而不是正则表达式。属性 pattern 用于正则表达式。

请检查此代码框示例。 https://codesandbox.io/s/react-hook-form-js-forked-5kep0?file=/src/App.js

【讨论】：

【解决方案2】：

<Input {...register("test")} />

您将返回的对象分配给ref。我猜那是错误的，但我不知道你的Input 组件是如何实现的。

这是一个可执行的例子。只需点击底部的Run code snippet。

const { useState, useEffect, useContext, useRef, useMemo } = React;
const { useForm } = ReactHookForm;

const App = () => {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm();

  const onSubmit = (data) => {
    alert(JSON.stringify(data));
  }; // your form submit function which will invoke after successful validation

  const nameRequired = errors.name && errors.name.type === "required";
  const namePattern = errors.name && errors.name.type === "pattern";

  const wrongAge = errors.age;

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="form-group">
        <label>Name</label>
        <input
          {...register("name", {
            required: true,
            pattern: /^[A-Za-z]+$/i
          })}
          className="form-control"
        />
        {nameRequired && <p>This field is required</p>}
        {namePattern && <p>Alphabetical characters only</p>}
      </div>
      <div className="form-group">
        <label>Age</label>
        <input
          {...register("age", { min: 18, max: 99 })}
          className="form-control"
        />
        {wrongAge && (
          <p>You Must be older then 18 and younger then 99 years old</p>
        )}
      </div>
      <input type="submit" />
    </form>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-hook-form@7.11.1/dist/index.umd.js"></script>
<div id="root"></div>

【讨论】：