React中使用antd里Form组件表单验证，其中的input设置type为number，中文输入法却能却输入

最新推荐文章于 2024-04-30 13:43:08 发布
最新推荐文章于 2024-04-30 13:43:08 发布
阅读量2.7k 收藏
点赞数
分类专栏： React后台管理项目笔记 记录贴 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Voiceu/article/details/115907896
版权

场景

如题，已经在此处设置了表单验证规则，并且input的type为number
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

情况是，输入数字，不能输入，英文输入法下输入英文，也无法输入，

但是用中文输入法，不按回车的情况下还能输入，打完字不按回车，直接点击输入框外的区域，还能保留下输入的内容，也不触发验证，但是最后提交会触发验证
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击提交后
在这里插入图片描述

探索过程

然后给Form进行添加valuechange的监听，发现这种靠中文输入法放上去的值，并没有引起value的改变，如下

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
甚至，我以这个输入开头，在后面继续添加数字，依然不会有valuechange发生
在这里插入图片描述
但是如果只写数字，则会打印监听事件，如下
在这里插入图片描述
加了显示price的值的监听，也无法得到
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

网上说搜狗和微软的输入法机制不一样，链接地址
所以又试了一下，果然，微软自带的中文，就是不能输入（符合情景目的），

最低0.47元/天 解锁文章
VoiceU
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
react 输入框输入异常
weitao_11的博客
06-24 1660
react 输入框输入异常,光标异常，输入会变
react获取input的值并提交的两种方法，input输入框输入内容无效的情况
liulang68的博客
12-18 4028
https://www.jb51.net/article/209592.htm
【antd + vue】InputNumber 数字输入框 输入限制
最新发布
m0_65041204的博客
04-30 1069
表格行可输入，InputNumber 数字输入框 输入限制使用precision时，超出规定小数位数时会自动四舍五入
[React] Form数字校验功能实现
weixin_44490590的博客
01-26 794
难点: 1.type = number Input 的 值默认为字符串 需要通过transform方法来转换成数值,不然会一直不是数值 2.控制数值大小 实现效果
【Antdv】input type=number去掉上下箭头、提示文字、鼠标滚轮
Owen的博客
10-19 1592
input type=number、InputNumber 去掉上下箭头，禁用鼠标滚动。
自我备份之react antd form表单回显踩坑
lxy7809的博客
03-09 2418
需求如下 在弹窗里显示一个表单，并进行回显，涉及到的组件有，简单的input框，inputNumber框，select，此处前端懒得让后端写接口点击自己获取到form表单里的数据，方法也不难 在链接处添加点击事件 代码如下（简单记录） onClick={() => this.getInformation(info)} //此处是点击事件的方法 getInformation = (info) => { //此处打印的东西见下图 console.log(info)..
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
在react-antd中弹出层form内容传递给父组件的操作
01-21
import { Form, Input} from 'antd'; const FormItem = Form.Item; class Forms extends Component{ getItemsValue = ()=>{ //3、自定义方法，用来传递数据（需要在父组件中调用获取数据） const values= this....
antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题
01-06
Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应: // 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal', const formLayout = { labelCol: { span: 4 }, wrapperCol: { ...
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得...在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
react中使用antDesign的Input/InputNumber最多保留两位小数，多的小数位禁止输入，且实现输入实时校验并添加千位分隔符
热门推荐
Sylvasylva的博客
05-18 1万+
在项目中有一个需求，对输入的金额需要最多保留两位小数，多的小数位禁止输入。使用网上查询的方法很多都不能实现实时校验，大多是输入的多位小数在失焦后再处理为两位小数，并不满足我这个项目的需求，经过多次改造尝试符合预期效果，特此写下笔记分享。 1.在input中实现，主要利用Form.Item自带的属性getValueFromEvent <Col span={10}> <Form.Item
使用ant-design-vue在IE11中使用input-number开发环境正常，打包后不生效
ZHANG_666
04-12 525
input-number 场景:windows 自带的IE11浏览器中给input-number 设置默认值 开发环境正常 打包后无效 解决:添加组件方法 step <a-input-number step="1" v-model="form.priceRate" style="width: 290px" /> ...
React+Antd项目，Form的Input中已经有内容，但是还是提示此项为必填项，不能为空
BigFamer的博客
08-26 4700
我们在进行数据采集功能开发的时候，往往会用到Form表单，这其中必不可少的就会用到Input（多种type类型）输入框。经常还会对其中的某一些Input输入做一些必填或者某些输入格式的限制，设置默认值和placehoder等等需求场景。我在使用React + Antd构建含有多个Input组件的Form表格时，遇到了下述问题…...
IviewUI form校验number类型有值却提示无效问题
weixin_49032614的博客
11-16 1086
在跟后端对接接口的过程里少不了表单校验的东西，除了string类型外当然也有number数字类型的，但是当我使用number类型的下拉框时，明明选中打印是这个字段是有值的，但是却还是校验失败提醒。我当时以为是个BUG，于是解决办法是先用字符串，提交再转成number类型，但是这样明显麻烦了很多，直到后来————我在IviewUI的文档里查到了rules规则里面有个校验类型的。在校验规则中加入type: "number"即可解决问题。
form表单验证规则的各个属性
weixin_45781661的博客
09-16 1694
form表单验证规则的各个属性 有如下几个属性 rules: [{ required: true,//表示此项为必填项 whitespace: true,// type:'number',//限制输入内容是什么格式 transform(value) {//如果限制是数字，这里可以转换成数字格式的 if(value){ return Number(value);
antd表单校验及常用默认规则
qq_24385297的博客
06-02 248
【代码】表单校验常用默认规则。
Ant-Design input 标签type=“number“时，鼠标滚动取消
weixin_46382462的博客
12-15 1005
input的type为number时 <a-input v-model="C.length" prefix="长:" onmousewheel="return false" type="number"/> 只需要在a-input标签中添加这个onmousewheel属性就可以了 onmousewheel="return false"
el-input设置type=“number”时，切换为中文输入法输入会让光标上移的bug
想好了再写！
02-07 416
el-input设置type="number"时，切换为中文输入法输入会让光标上移的bug。
在react项目中，如何使用antd的Form组件中的form.getFeildValue替换Form.useWatch?
06-01
在 Ant Design 的 Form 组件中，可以使用 `form.getFieldValue` 方法来获取表单项的值，替代 `Form.useWatch`。 具体使用方法如下： 首先需要在组件中引入 `Form` 和 `Input` 组件： ```javascript import { Form, Input } from 'antd'; ``` 然后在组件中使用 `Form.useForm` 方法创建表单实例： ```javascript const [form] = Form.useForm(); ``` 接着可以在组件中使用 `form.getFieldValue` 方法来获取表单项的值： ```javascript const handleSubmit = () => { const { username, password } = form.getFieldsValue(); // 处理表单数据 } ``` 如果要监听表单项值的变化，可以使用 `form.setFieldsValue` 方法来设置表单项值，然后在组件中使用 `form.getFieldValue` 方法获取值。 ```javascript const handleChange = (value) => { form.setFieldsValue({ username: value }); const username = form.getFieldValue('username'); // 处理表单数据 } ``` 需要注意的是，`form.getFieldValue` 方法返回的是表单项的当前值，而不是表单项值的变化。如果需要监听表单项值的变化，可以通过 `form.setFieldsValue` 方法来设置表单项值，然后在组件中使用 `form.getFieldValue` 方法获取值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值