react-material-ui-form-validator：TextValidator禁用浏览器验证仅用自定义校验

我来帮你搞定这个问题！你遇到的核心矛盾是设置required="true"会触发浏览器原生验证，但你想只用自定义校验逻辑，同时还能让必填项标签自动显示*标识，不用手动拼接文本对吧？其实只需要简单两步就能实现需求：

关键解决方案步骤 #

• 禁用浏览器原生表单验证：在包裹组件的ValidatorForm上添加noValidate属性，彻底关闭浏览器自带的校验逻辑，让自定义规则完全接管。
• 利用组件内置的required标识：保留required={true}属性，react-material-ui-form-validator的TextValidator组件会自动在标签文本后追加*标识，不用手动在标签里写"标签名称 *"。
• 配置自定义校验规则：通过validators属性传入你需要的自定义校验规则（可以用组件内置的"required"规则，也可以自己注册新规则），搭配errorMessages设置对应的提示文本。

完整代码示例 #

import React, { useState, useEffect } from "react";
import { TextValidator, ValidatorForm } from "react-material-ui-form-validator";
import Button from "@mui/material/Button";

export default function RequiredFieldForm() {
  const [inputValue, setInputValue] = useState("");
  const [emailValue, setEmailValue] = useState("");

  // 注册自定义必填校验规则（可根据需求调整逻辑）
  useEffect(() => {
    ValidatorForm.addValidationRule("customRequired", (value) => {
      // 示例：排除纯空格的情况
      return value.trim().length > 0;
    });
  }, []);

  const handleFormSubmit = () => {
    alert("表单提交成功！");
  };

  return (
    <ValidatorForm onSubmit={handleFormSubmit} noValidate>
      <TextValidator
        label="用户名"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        required={true}
        validators={["customRequired"]}
        errorMessages={["用户名不能为空"]}
        fullWidth
        margin="normal"
      />
      <TextValidator
        label="邮箱"
        value={emailValue}
        onChange={(e) => setEmailValue(e.target.value)}
        required={true}
        validators={["required", "isEmail"]}
        errorMessages={["邮箱不能为空", "请输入有效的邮箱地址"]}
        fullWidth
        margin="normal"
      />
      <Button type="submit" variant="contained" color="primary">
        提交表单
      </Button>
    </ValidatorForm>
  );
}

代码说明 #

1. noValidate属性：添加在ValidatorForm上，这是HTML5表单的原生属性，用来禁用浏览器的自动校验，确保只有我们配置的自定义规则生效。
2. required={true}：让TextValidator自动在标签后添加*标识，省去手动拼接文本的麻烦，同时组件会识别这个属性来触发校验逻辑。
3. 自定义校验规则：通过ValidatorForm.addValidationRule注册你自己的校验逻辑，比如示例中排除纯空格的必填校验；也可以直接使用组件内置的"required"、"isEmail"等规则快速实现校验。

这样配置后，既能自动显示必填项的*标识，又完全使用自定义校验逻辑，不会触发浏览器原生的验证提示啦！

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