如何使用reactJS和typescript在fabric UI中验证提交表单上的多个文本字段？

在fabric UI中使用ReactJS和TypeScript验证提交表单上的多个文本字段，可以按照以下步骤进行：

首先，确保已经安装了ReactJS和TypeScript的开发环境，并且已经导入了fabric UI的相关组件和样式。
创建一个React组件，用于表示表单。在组件的state中定义多个文本字段的值和验证状态。
在render方法中，使用fabric UI的TextField组件来渲染每个文本字段。将每个文本字段的值和验证状态与state中对应的属性绑定。
在每个文本字段的onChange事件处理程序中，更新state中对应的属性的值。
在表单的提交事件处理程序中，对每个文本字段的值进行验证。可以使用正则表达式、条件判断等方式进行验证。如果验证失败，可以设置state中对应的验证状态为false，并显示相应的错误提示。
在render方法中，根据每个文本字段的验证状态，显示相应的错误提示信息。

以下是一个示例代码：

import * as React from 'react';
import { TextField, PrimaryButton } from 'office-ui-fabric-react';

interface IFormState {
  field1: string;
  field2: string;
  field1Valid: boolean;
  field2Valid: boolean;
}

export class MyForm extends React.Component<{}, IFormState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      field1: '',
      field2: '',
      field1Valid: true,
      field2Valid: true,
    };
  }

  handleField1Change = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
    this.setState({
      field1: newValue || '',
      field1Valid: true,
    });
  };

  handleField2Change = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
    this.setState({
      field2: newValue || '',
      field2Valid: true,
    });
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    // 验证字段1
    if (this.state.field1.trim() === '') {
      this.setState({ field1Valid: false });
    }

    // 验证字段2
    if (this.state.field2.trim() === '') {
      this.setState({ field2Valid: false });
    }

    // 如果所有字段都通过验证，则提交表单
    if (this.state.field1Valid && this.state.field2Valid) {
      // 提交表单的逻辑
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <TextField
          label="字段1"
          value={this.state.field1}
          onChange={this.handleField1Change}
          errorMessage={!this.state.field1Valid ? '字段1不能为空' : undefined}
        />
        <TextField
          label="字段2"
          value={this.state.field2}
          onChange={this.handleField2Change}
          errorMessage={!this.state.field2Valid ? '字段2不能为空' : undefined}
        />
        <PrimaryButton type="submit">提交</PrimaryButton>
      </form>
    );
  }
}

在这个示例中，我们创建了一个包含两个文本字段的表单。在提交表单时，会对每个字段进行非空验证，并显示相应的错误提示信息。如果所有字段都通过验证，则可以执行提交表单的逻辑。

请注意，这只是一个简单的示例，实际应用中可能需要更复杂的验证逻辑和错误处理。另外，这个示例中使用的是office-ui-fabric-react库中的TextField和PrimaryButton组件，你可以根据实际需求选择其他适合的组件。

关于ReactJS和TypeScript的更多信息，你可以参考以下链接：