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