React Antd中如何設(shè)置表單只輸入數(shù)字
更新時間：2023年06月07日 16:54:41 作者：關(guān)山煮酒
這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React Antd設(shè)置表單只輸入數(shù)字
廢話不多說，直接上代碼：
<Form.Item name = "postcode" label="郵編" rules={[
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? required: true,
? ? ? ? ? ? ? ? ? ? message: '請輸入郵政編碼',
? ? ? ? ? ? ? ? },//！??！控制只能輸入數(shù)字的規(guī)則在下面
? ? ? ? ? ? ? ? () =>({
? ? ? ? ? ? ? ? validator(rule,value){
? ? ? ? ? ? ? ? if(/\d{6}/.test(value)){//if中是正則表達是,判斷是否是6位數(shù)字
? ? ? ? ? ? ? ? return Promise.resolve();
? ? ? ? ? ? }
? ? ? ? ? ? ? ? else
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return Promise.reject("請輸入6位郵政編碼");//如果違反規(guī)則，就會給出提示
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? }),]}>
? ? ? ? ? ? ? ? <Input type="text" id="postcode" placeholder="郵編"/>
? ? ? ? ? ? </Form.Item>具體的一些說明在代碼中注釋了！其中if中的正則表達式中d{6}式中的6表示只能輸入6個數(shù)字。
此外，<Form.item> 中的name屬性必須指定才能夠進行判斷。
另外關(guān)于手機號的表單輸入也可以見如下代碼：
? <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開頭，后面數(shù)組限制在3到9，最后再要求輸入9個數(shù)字即可。
React antd進行表單驗證誤報
使用React antd進行表單驗證時，已經(jīng)給表單元素賦值了，但無法通過驗證
在做表單編輯時，需要對表單進行默認值顯示，但是使用radio、upload、rangePicker等組件時，需要給formItem設(shè)置initialValue或通過form的setFieldsValue來進行表單初值的賦值。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React Native使用Modal自定義分享界面的示例代碼
本篇文章主要介紹了React Native使用Modal自定義分享界面的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要介紹了React中的Hooks路由跳轉(zhuǎn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
react-router 路由切換動畫的實現(xiàn)示例
這篇文章主要介紹了react-router 路由切換動畫的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
react 通過后端接口實現(xiàn)路由授權(quán)的示例代碼
本文主要介紹了React應(yīng)用中通過后端接口獲取路由授權(quán),實現(xiàn)動態(tài)和靈活的權(quán)限管理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
這篇文章主要為大家詳細介紹了React?開發(fā)中遇到的具名插槽的函數(shù)用法,文中的示例代碼講解詳細,具有一定的學習價值,有興趣的小伙伴可以了解一下2023-11-11
React路由規(guī)則定義與聲明式導(dǎo)航及編程式導(dǎo)航分別介紹
這篇文章主要介紹了React路由規(guī)則的定義、聲明式導(dǎo)航、編程式導(dǎo)航，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-09-09
React Antd中如何設(shè)置表單只輸入數(shù)字
這篇文章主要介紹了React Antd中如何設(shè)置表單只輸入數(shù)字問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
react+antd實現(xiàn)動態(tài)編輯表格數(shù)據(jù)
這篇文章主要為大家詳細介紹了react+antd實現(xiàn)動態(tài)編輯表格數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
下面小編就為大家?guī)硪黄猺eact系列從零開始_簡單談?wù)剅eact。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
React中完整實例講解Recoil狀態(tài)管理庫的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫的使用，Recoil的產(chǎn)生源于Facebook內(nèi)部一個可視化數(shù)據(jù)分析相關(guān)的應(yīng)用，在使用React的實現(xiàn)的過程中，因為現(xiàn)有狀態(tài)管理工具不能很好的滿足應(yīng)用的需求，因此催生出了Recoil，對Recoil感興趣可以參考下文2023-05-05