当用户输入多个“一个”或 1 个字符时如何显示错误？答案

【问题标题】：How to show error when user enter more than `one` or 1 character?当用户输入多个“一个”或 1 个字符时如何显示错误？
【发布时间】：2019-09-26 16:57:39
【问题描述】：

我在我的应用程序中使用ant design。 https://ant.design/components/table/ 我面临一个验证问题。我在演示中实现了表格。当我单击edit 按钮时，它显示input field

我可以添加required 的验证。因此不允许为空。但我希望用户只在input 字段中输入one 或1 个字符，否则会显示错误。

这是我的代码 https://codesandbox.io/s/thirsty-tesla-1nwph

return (
      <td {...restProps}>
        {editing ? (
          <Form.Item style={{ margin: 0 }}>
            {getFieldDecorator(dataIndex, {
              rules: [
                {
                  required: true,
                  message: `Please Input ${title}!`
                }
              ],
              initialValue: record[dataIndex]
            })(getInput())}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };

表单错误 https://ant.design/components/form/

【问题讨论】：

在输入字段上使用 maxLength 属性？
我很确定 OP 想要文字选项“1”或“one”，在这种情况下，模式属性会起作用。

标签： javascript reactjs antd

【解决方案1】：

我可以添加所需的验证。所以不允许为空。但我希望用户只在输入字段中输入一个或 1 个字符，否则会显示错误。

如果你说“只有文字 1 或 one 在输入中应该是有效的”，你可以使用

              rules: [
                {
                  required: true,
                  message: `Please Input ${title}!`
                },
                {
                  pattern: /^(1|one)$/,
                  message: "Only 1 or one are valid"
                }
              ],

否则，如果它是长度，您可以使用max 属性。可以在此处查看所有验证规则的列表：https://ant.design/components/form/?locale=en-US#Validation-Rules

【讨论】：