我正在使用React 18和Firebase 9开发一个聊天应用程序。
我使用**Simple Body Validator**进行（更干净的）表单验证。
在 Register 表单中，我有一个file类型的输入，用于上传用户头像。
我需要限制可以上传到 *JPEG和PNG文件只 *。
为此目的：
在Register.jsx组件中，我有：

import { make, register } from "simple-body-validator";
// Custom validation rule
register('image-only', function (value) {
  let allowedFormats = ["jpg", "jpeg", "png"]; 
  let format = value.name.split('.')[1].toLowerCase();
  return allowedFormats.includes(format);
});
export default function Register() {
  const initialFormData = {
    firstName: "",
    lastName: "",
    email: "",
    avatar: "",
    password: "",
    password_confirmation: ""
  };
  // Apply validation rules
  const validationRules = {
    firstName: ["required", "string", "min:3", "max:255"],
    lastName: ["required", "string", "min:3", "max:255"],
    email: ["required", "email"],
    avatar: ["image-only"],
    password: ["required", "min:6", "confirmed"],
    password_confirmation: ["required"]
  };
  return (
    <FormCard title="Register">
      <form onSubmit={handleSubmit}>
        <div
          className={`mb-2 form-element ${errors.has("avatar") ? "has-error" : null
            }`}
        >
          <label for="avatar" className="form-label">
            Avatar
          </label>
          <input
            type="file"
            id="avatar"
            name="avatar"
            onChange={handleChange}
            className="form-control form-control-sm"
          />
          {errors.has("avatar") ? (
            <p className="invalid-feedback">{errors.first("avatar")}</p>
          ) : null}
        </div>
      </form>
    </FormCard>
  );
}

问题
尽管不允许的格式被排除在外，但正如预期的那样，没有验证错误消息和 * 我不知道如何添加它 *。

提问

如何将消息添加到已创建的自定义验证规则中？