Question

我有一个表单，我想在其中一个输入上进行验证，我使用 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>

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

Answer 1

就您而言，您使用的是验证函数，而不是正则表达式。 prop pattern 用于正则表达式。

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

Answer 2

register 方法返回需要在输入中注册的多个值 { onChange, onBlur, name, ref }。例如

<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>

反应钩子形式的验证？

2 个答案: