Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在reactjs中验证表单_Javascript_Reactjs_Ecmascript 6_Antd - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 如何在reactjs中验证表单

Javascript 如何在reactjs中验证表单

javascript reactjs ecmascript-6

Javascript 如何在reactjs中验证表单,javascript,reactjs,ecmascript-6,antd,Javascript,Reactjs,Ecmascript 6,Antd,我在reactjs中工作，我在表单中实现了一些验证。我实现了一个逻辑，如果有人在没有上传照片和视频的情况下单击“下一步”，然后向用户显示错误，验证在第一次尝试时工作正常，但当用户删除照片或视频，然后单击“下一步”时，表单未进行验证。你能帮我验证一下表单吗？我正在使用ant设计表单。我将和你分享代码。请帮我。我真的被卡住了 代码 <Form onSubmit={this.handleSubmit}> <FormItem> {getFieldD

我在reactjs中工作，我在表单中实现了一些验证。我实现了一个逻辑，如果有人在没有上传照片和视频的情况下单击“下一步”，然后向用户显示错误，验证在第一次尝试时工作正常，但当用户删除照片或视频，然后单击“下一步”时，表单未进行验证。你能帮我验证一下表单吗？我正在使用ant设计表单。我将和你分享代码。请帮我。我真的被卡住了

代码

 <Form onSubmit={this.handleSubmit}>
      <FormItem>
        {getFieldDecorator('picture', {
          rules: [
            {
              required: true,
              message: 'Please upload picture!',
            },
          ],
        })(
          <Dragger {...props}>
            <p className="ant-upload-drag-icon">
              <Icon type="upload" />
            </p>
            <p className="ant-upload-text">
              Click or drag photo to this area to upload
            </p>
          </Dragger>,
        )}
      </FormItem>

      <PhotoText>Select a Video to Upload</PhotoText>
      <FormItem>
        {getFieldDecorator('video', {
          rules: [
            {
              required: true,
              message: 'Please upload video!',
            },
          ],
        })(
          <Dragger>
          <p className="ant-upload-drag-icon">
            <Icon type="upload" />
          </p>
          <p className="ant-upload-text">
            Click or drag Video to this area to upload
          </p>
        </Dragger>,
        )}
      </FormItem>
    </Form>


{getFieldDecorator（'图片'{
规则：[
{
要求：正确，
信息：“请上传图片！”，
},
],
})(






单击或拖动照片到此区域以上载


,
)}
选择要上载的视频
{getFieldDecorator（'视频'{
规则：[
{
要求：正确，
信息：“请上传视频！”，
},
],
})(






单击或拖动视频到此区域以上载


,
)}
因为您使用的是向导表单，所以您需要在每个步骤中传递
此.props.form
，如下所示：

<Step1 form={this.props.form} />

next() {
    if (this.state.current == 0) {
        this.props.form.validateFieldsAndScroll(["picture"], (err, values) => {
            if (!err) {
                const current = this.state.current + 1;
                this.setState({ current });
            }
        });
    }
}
我创造了一个新的世界

编辑

然后，您需要以某种方式编写自己的逻辑，因为我认为Ant design不提供这种功能。例如，如果（！err），您可以编写如下内容，而不是
if（！err）
：

if (!err && values.picture && values.picture.fileList.length > 0)
然后您可以编写一些逻辑来显示自定义验证消息，如下所示：

{picture && picture.fileList.length <= 0 ? "Please upload picture!" : ""}

{picture&&picture.fileList.length请帮助我？你能不能也添加提交函数或创建一个？@TriyugiNarayanMani。实际上我正在处理向导表单。{current