ant Design2和4 Form组件getFieldDecorator去空格(正则)

阳光穿透心脏的1/2处 2021-09-20 23:58 239阅读 0赞

# ant2 去空格代码 #

getValueFromEvent: event => event.target.value.replace(/\s+/g, ''),

# 使用 #

<FormItem label="库箱号" { ...ItemLayout}>
     { getFieldDecorator('ctnNo', { 
       getValueFromEvent: event => event.target.value.replace(/\s+/g, ''),
     })(
       <Input allowClear />,
     )}
    </FormItem>

# ant4 去空格 #

正则表达式参考文档：[https://www.runoob.com/regexp/regexp-tutorial.html][https_www.runoob.com_regexp_regexp-tutorial.html]

正则表达式在线工具：[http://c.runoob.com/front-end/854][http_c.runoob.com_front-end_854]

*  `/[^\d]]*/g`：只包含数字正则
 *  `/[^\d，,]]*/g`：只包含数字与中英文逗号正则
 *  `/[^v^\d.-]]*/g`：只包含 `小写字母v、数字、英文句号 . 和 -` 的正则
 *  `/[^\dA-Za-z]]*/g`：只包含数字和英文字母正则
 *  `/\s+/g`：所有空格正则

`getValueFromEvent={event => event.target.value.replace(/\s+/g, '')}`

<FormItem
        name='name'
        label="资源名"
        rules={ [{  required: true }]}
        getValueFromEvent={ event => event.target.value.replace(/\s+/g, '')}
    >
        <Input allowClear />
    </FormItem>

# 数值分隔 #

// 每三位进行逗号分隔的函数, 比如10000 = 10,000
    function formatNumber(v) { 
    	return ''.concat(v).replace(/\d{1,3}(?=(\d{3})+$)/g, function (s) { 
    	    return ''.concat(s, ',');
    	});
    }

[https_www.runoob.com_regexp_regexp-tutorial.html]: https://www.runoob.com/regexp/regexp-tutorial.html
[http_c.runoob.com_front-end_854]: http://c.runoob.com/front-end/854

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue ant-design form 验证

ant-design form 官网的验证比较简单，而且写法看起来很乱，把验证和html给混合到一起了，可读性不强，这里专门做一个例子，展示如何把把验证逻辑和html代...

深碍√TFBOYSˉ_/ 2024年04月18日 12:50/ 0 赞/ 77 阅读

相关 Antd Form组件getFieldDecorator设置Input替换空格

核心代码 getValueFromEvent: event => event.target.value.replace(/\s+/g, ''), ...

￡神魔★判官ぃ/ 2024年04月18日 06:34/ 0 赞/ 66 阅读

相关 React安装ant design组件库，并使用

ant design是一个很棒的组件库，官方地址：[快速上手 - Ant Design][- Ant Design] 但是如何在React里面用起来，好像并不是很顺畅，没有像

浅浅的花香味﹌/ 2023年10月14日 13:44/ 0 赞/ 72 阅读

相关 ant design vue 中FormModel 自定义正则校验方法

方法一： <a-form-model ref="ruleForm" :model="form"

悠悠/ 2022年12月07日 11:51/ 0 赞/ 648 阅读

相关 ant design getFieldDecorator、validateFields、getFieldsValue

export中添加 export default Form.create()(connect(({ TankManage }) => ({ TankManage })

偏执的太偏执、/ 2022年12月07日 11:38/ 0 赞/ 117 阅读

相关 ExtJS4 form组件收缩

效果图 ![Center][] 添加属性：collapsible Ext.define('V5.projectinfo.view.Left', \{ exten

拼搏现实的明天。/ 2022年09月25日 08:20/ 0 赞/ 213 阅读

相关 ant-design vue组件库使用后总结

1、form组件自定义校验 template: <a-form-item fieldDecoratorId="articleNum

川长思鸟来/ 2022年08月29日 10:24/ 0 赞/ 345 阅读

相关 ant-design vue组件库使用后总结

1、form组件自定义校验 template: <a-form-item fieldDecoratorId="articleNum

骑猪看日落/ 2022年01月26日 09:11/ 0 赞/ 324 阅读

相关 ant Design2和4 Form组件getFieldDecorator去空格(正则)

ant2 去空格代码 getValueFromEvent: event => event.target.value.replace(/\s+/g, ''),

阳光穿透心脏的1/2处/ 2021年09月20日 23:58/ 0 赞/ 240 阅读

相关 ant design Menu组件子菜单宽度问题

Menu二级子菜单比父级菜单长 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

心已赠人/ 2021年09月20日 19:24/ 0 赞/ 1048 阅读