React应用中如何为Simple Body Validator自定义验证规则添加提示消息

我正在使用React 18和Firebase 9开发一款聊天应用，采用Simple Body Validator实现表单验证。注册表单里有个file类型的输入框用于上传用户头像，需要限制仅允许JPEG和PNG格式的文件。

我编写了自定义验证规则，能拦截非法格式，但不会显示验证错误消息，不知道怎么给这个自定义规则添加提示消息。相关代码如下：

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>
  );
}

方法一：注册规则时直接指定默认错误消息 #

调用register方法时，第三个参数可传入自定义错误消息。修改自定义规则注册代码：

register('image-only', function (value) {
  let allowedFormats = ["jpg", "jpeg", "png"]; 
  let format = value.name.split('.')[1].toLowerCase();
  return allowedFormats.includes(format);
}, '头像必须是JPEG或PNG格式的图片。');

如果想用动态字段名，可使用:attribute占位符，它会自动替换为对应字段名（比如这里的"Avatar"），示例：

register('image-only', function (value) {
  // 验证逻辑不变
}, 'The :attribute must be a JPEG or PNG image.');

方法二：通过验证实例设置自定义消息 #

若需要更灵活的消息管理，可在创建验证器实例后，用setMessages方法添加对应规则的错误消息：

// 组件内部创建验证实例的位置添加
const validator = make(initialFormData, validationRules);
validator.setMessages({
  'image-only': '请上传JPEG或PNG格式的头像图片。'
});

也可以针对特定字段设置专属提示：

validator.setMessages({
  avatar: {
    'image-only': '头像仅支持JPEG和PNG格式，请重新上传。'
  }
});

额外优化：修复文件名无后缀的判断漏洞 #

原代码中如果文件名没有后缀（比如"avatar"），split('.')[1]会返回undefined，导致报错。优化验证逻辑：

register('image-only', function (value) {
  const allowedFormats = ["jpg", "jpeg", "png"];
  const fileNameParts = value.name.split('.');
  if (fileNameParts.length < 2) return false; // 无后缀文件直接判定不合法
  const format = fileNameParts.pop().toLowerCase();
  return allowedFormats.includes(format);
}, '头像必须是JPEG或PNG格式的图片。');

内容的提问来源于stack exchange，提问作者Razvan Zamfir