如何配置TextField的Pattern仅允许字母和空格，并实现提交时仅用输入文本？

一、修正输入验证规则（允许字母和空格） #

当前的pattern属性存在两处问题：一是多了正则表达式的/包裹（HTML原生pattern无需此格式）；二是未包含空格匹配规则。修改后的配置如下：

<TextField
  id="name"
  label="Name"
  name="name"
  type="text"
  placeholder="John Smith"
  pattern="^[A-Za-z\s]{4,16}$"
  title="姓名只能包含英文字母和空格，长度需在4-16字符之间"
  required
/>

• ^[A-Za-z\s]{4,16}$：确保输入内容仅由英文字母（大小写）和空格组成，且长度限制在4-16字符范围内
• 同步更新title属性的提示文本，让用户明确输入规则

二、提交时仅使用输入框文本 #

在表单提交逻辑中，直接获取该输入框的有效值即可，分两种场景给出实现：

原生JS场景 #

// 绑定表单提交事件
document.getElementById('your-form-id').addEventListener('submit', function(e) {
  // 阻止表单默认跳转行为
  e.preventDefault();
  // 获取输入框文本并去除首尾空格
  const nameValue = document.getElementById('name').value.trim();
  // 仅用该值执行后续业务逻辑（如接口请求、数据存储）
  console.log('提交的姓名：', nameValue);
});

React（Material UI）场景 #

import { useState } from 'react';
import TextField from '@mui/material/TextField';

function NameSubmitForm() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 直接使用状态中的输入值提交
    console.log('提交的姓名：', name.trim());
    // 这里添加你的业务处理逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <TextField
        id="name"
        label="Name"
        name="name"
        type="text"
        placeholder="John Smith"
        pattern="^[A-Za-z\s]{4,16}$"
        title="姓名只能包含英文字母和空格，长度需在4-16字符之间"
        required
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button type="submit">提交</button>
    </form>
  );
}

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