antd的form 的input输入框怎么限制不能输入空格

antd的form 的input输入框怎么限制不能输入空格

阅读 28.2k
4 个回答

在onKeyDown上判断event的keyCode==32, 直接return false即可

也是遇到了这个问题,做下记录,AntDesign中的Form表单其实提供了非常丰富的校验方式,有两种方式解决input不能输入空格的问题(具体看自己的需求),其它的校验也是大同小异,直接上代码

<Form.Item label="名字">
    {getFieldDecorator('name', {
      rules: [
        {
          required: true,
          message: '请输入名字',
        },
        // 方式一:正则匹配(提示错误,阻止表单提交)
        {
          pattern: /^[^\s]*$/,
          message: '禁止输入空格',
        }
      ],
      // 方式二:粗暴点<Input>不允许输入空格(其实是将e.tartget.value转成控件自己的值)
      // 这个方法的用途非常强大,还可以结合upload做一些文件上传之后的回调处理
      getValueFromEvent: (event) => {
        return event.target.value.replace(/\s+/g,"")
      },
    })(<Input size="large" placeholder="请输入名字" maxLength={20} />)}
</Form.Item>

enjoy.继续踩坑

getFieldDecorator中rules数组的元素可以有个pattern属性,用来验证输入

新手上路,请多包涵

这个你直接加个正则,不就可以了饿

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题