React Antd中如何设置表单只输入数字

 更新时间:2023年06月07日 16:54:41   作者:关山煮酒  
这篇文章主要介绍了React Antd中如何设置表单只输入数字问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

React Antd设置表单只输入数字

废话不多说,直接上代码:

<Form.Item name = "postcode" label="邮编" rules={[
                {
                    required: true,
                    message: '请输入邮政编码',
                },//!!!控制只能输入数字的规则在下面
                () =>({
                validator(rule,value){
                if(/\d{6}/.test(value)){//if中是正则表达是,判断是否是6位数字
                return Promise.resolve();
            }
                else
            {
                return Promise.reject("请输入6位邮政编码");//如果违反规则,就会给出提示
            }
            }
            }),]}>
                <Input type="text" id="postcode" placeholder="邮编"/>
            </Form.Item>

具体的一些说明在代码中注释了!其中if中的正则表达式中d{6}式中的6表示只能输入6个数字。

此外,<Form.item> 中的name属性必须指定才能够进行判断。

另外关于手机号的表单输入也可以见如下代码:

  <Form.Item name="phoneNumber" label="电话号码" rules={[
                {
                    required: true,
                    message: '请输入收件人电话号码!',
                },
                () =>({
                    validator(rule,value){
                        if(/^1[3-9]\d{9}/.test(value)){
                            return Promise.resolve();
                        }
                        else
                        {
                            return Promise.reject("请输入正确的手机号");
                        }
                    }
                })]} >
                <Input  id="phoneNumber" placeholder="电话号码" />
            </Form.Item>

看不懂正则表达式的直接用就行了。

这里简单解释一下,就是以1开头,后面数组限制在3到9,最后再要求输入9个数字即可。

React antd进行表单验证误报

使用React antd进行表单验证时,已经给表单元素赋值了,但无法通过验证

在做表单编辑时,需要对表单进行默认值显示,但是使用radio、upload、rangePicker等组件时,需要给formItem设置initialValue或通过form的setFieldsValue来进行表单初值的赋值。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React中useRef的具体使用

    React中useRef的具体使用

    这篇文章主要介绍了React中useRef的具体使用,它可以用来获取组件实例对象或者是DOM对象,除此之外还有哪些用法,就一起来了解一下
    2021-04-04
  • React classnames原理及测试用例

    React classnames原理及测试用例

    这篇文章主要为大家介绍了React classnames原理及测试用例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 如何在React中通过URL预览Excel文件

    如何在React中通过URL预览Excel文件

    这篇文章主要为大家详细介绍了如何在React中通过URL预览Excel文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03
  • React反向代理与CSS模块化的使用案例

    React反向代理与CSS模块化的使用案例

    这篇文章主要介绍了React反向代理与CSS模块化的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-02-02
  • react umi 刷新或关闭浏览器时清除localStorage方式

    react umi 刷新或关闭浏览器时清除localStorage方式

    这篇文章主要介绍了react umi 刷新或关闭浏览器时清除localStorage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • react路由守卫的实现(路由拦截)

    react路由守卫的实现(路由拦截)

    react不同于vue,通过在路由里设置meta元字符实现路由拦截。本文就详细的介绍一下,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • react如何将字符串转义成html语句

    react如何将字符串转义成html语句

    这篇文章主要介绍了react如何将字符串转义成html语句问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • react中this指向的使用小结

    react中this指向的使用小结

    JavaScript中this指向取决于调用方式,React中需绑定this以防undefined,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2025-08-08
  • 详解如何在React单页面应用中捕获错误

    详解如何在React单页面应用中捕获错误

    在当前的Web开发中,使用React构建单页面应用(SPA)已经成为一种常见的做法,然而,当应用程序遇到错误时,有可能会导致整个页面崩溃,给用户带来不好的体验,本文将介绍如何在React单页面应用中捕获错误,以防止整个页面的崩溃,需要的朋友可以参考下
    2023-09-09
  • JavaScript中React面向组件编程(上)

    JavaScript中React面向组件编程(上)

    本文主要介绍了React组件中默认封装了很多属性,有的是提供给开发者操作的,其中有三个属性非常重要:state、props、refs。感兴趣的小伙伴可以参考阅读
    2023-03-03

最新评论