快捷導(dǎo)航

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ù)字即可。