首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

以下是一个示例代码:

代码语言:txt
复制
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的更多信息,你可以参考以下链接:

  • ReactJS官方文档:https://reactjs.org/
  • TypeScript官方文档:https://www.typescriptlang.org/

希望这个回答对你有帮助!

相关搜索:如何使输入字段中的文本在提交后显示在屏幕上?如何使用jquery在表单提交中添加对字段值的编辑使用react和material ui在文本字段中更改required的标签MS-Office React-Fabric UI -如何在提交表单时在日期选择器上显示所需的错误消息?如何在没有字段接触的情况下提交Formik表单时在TextField上显示验证错误如何使用fabric.js画布库在画布上创建的矩形中写入文本如何使用cypress test在文本字段中输入生成的验证码文本?当验证器仍然不能正确地使用flutter时,如何停止提交给mysql的文本表单字段?在使用React和Semantic-UI-React的迭代中,在Edit select上仅显示一个表单字段?如何使用React中的material-UI在onFocus事件上选择文本字段中的部分文本?如何使用material ui在reactjs / css中创建包含多个部分的tableHead单元格的表格如何使用laravel中的javascript在日期上应用必需的字段验证器?如何使用google recaptcha v2在html和node.js应用程序中验证表单提交如何在提交表单时在ajax中验证输入的用户名和密码是否为空如何使用node js中的jimp在多个图像上打印不同的文本?如何使用Gatsby和Contentful的富文本字段在嵌入块中获取引用字段如何使用Codeigniter中的不同按钮在单个表单中上传多个图像和文本文件?Rails:如何使用jquery创建一个在erb表单中添加文本字段的Add more按钮如何在不重定向和不使用iframe的情况下提交表单?(在移动设备上似乎不起作用)如何只在用户点击提交表单时触发数据验证,而不是在ASP.NET MVC中文本框中的值改变后触发数据验证?
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券