AntD中Form的input正则校验:不能输入空格_antd input 正则-优快云博客

本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/127985616

本文介绍了正则表达式的概念及test()方法的使用，并通过两个JavaScript实例展示了如何利用正则表达式验证移动端浏览器和禁止输入框内的空格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是正则表达式？
在编写处理字符串的程序或网页时，经常有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说，正则表达式就是记录文本规则的代码。

正则test() 方法

定义和用法

test() 方法用于检测一个字符串是否匹配某个模式.

如果字符串中有匹配的值返回 true ，否则返回 false。

语法

RegExpObject.test(string)

Javascript 判断是移动端浏览器还是 PC 端浏览器:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    console.log("移动")
} else {
    console.log("PC")
}

Input不能输入空格正则校验

AntDesign中的Form表单其实提供了非常丰富的校验方式，有两种方式解决input不能输入空格的问题（具体看自己的需求），其它的校验也是大同小异，直接上代码

<Form.Item label="名字" name='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>