时间戳

首页 > 解决方案 > 如何在 Framework7 中验证提交时的表单

reactjs - 如何在 Framework7 中验证提交时的表单

问题描述

假设用户在将值输入某些字段之前单击提交。如何在提交完成之前触发所有输入的验证？

通常，HTML5 验证足够聪明，可以在单击按钮时触发验证，但这似乎不会发生在 Framework 7 表单中。这是一个简单的例子。

<List form>
  <ListInput type="email" validate errorMessage="Please enter a valid email" />
  <ListInput type="password" validate errorMessage="Please enter a value" required />
  <Button>Submit</Button>
</List>

我尝试使用 refs 来触发模糊，但我不确定如何获取 ListInput 创建的输入元素。

标签： reactjshtml-framework-7

解决方案

1. HTML5 验证

要获得正确的 HTML5 验证，您需要submit在表单上有 html 类型的按钮。

因此，在您的示例中，您必须将 type prop 添加到 framework7 的Button组件中：

<Button type="submit">Submit</Button>

2. 捕获提交事件并解析表单

要在表单上捕获提交事件，请将onSubmitprop 添加到 framework7 的List组件中。

Framework7 还有一个表单解析辅助方法app.form.converToData。要使用它，您还必须向组件添加name道具ListInput。

把它们放在一起看起来像这样：

<List form onSubmit={(e)=>this.onLoginForm(e)}>
  <ListInput placeholder="Email" type="email" name="email" validate errorMessage="Please enter a valid email" />
  <ListInput placeholder="Password" type="password" name="password" validate errorMessage="Please enter a value" required />
  <Button type="submit">Submit</Button>
</List>

检查此小提琴中的工作示例：https ://jsfiddle.net/alimamed/orzep1x8/

推荐阅读