關於 antd From表單一些驗證

1. 只能輸入數字

<Item label="code">
   {getFieldDecorator("code", {
     initialValue: code,
     rules: [
       {
         required: true,
         message: "請輸入code"
       },
       {
         required: false,
         pattern: new RegExp(/^[1-9]\d*$/, "g"),
         message: '請輸入正確的code'
       }
     ],
     // 加上這個操做只能輸入數字  輸入字符串是不被容許的，也輸入不進去
     getValueFromEvent: (event) => {
       return event.target.value.replace(/\D/g,'')
     },
   })(
     <Input placeholder="請輸入code" autoComplete="off" />
  )}
</Item>

2. 手機號判斷驗證

<Item label="phone">
   {getFieldDecorator("phone", {
     initialValue: phone,
     rules: [
       {
         required: true,
         message: "請輸入手機號"
       },
       {
         required: false,
         pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/, "g"),
         message: '請輸入正確的手機號'
       }
     ],
     getValueFromEvent: (event) => {
       return event.target.value.replace(/\D/g,'')
     },
   })(
     <Input placeholder="請輸入手機號" maxLength={11} autoComplete="off" />
  )}
</Item>

3. 身份證校驗

/**
  * 1-9]\d{5}: 前六位地區，非0打頭;
  * (18|19|20): 18或19或20，表示年份開頭;
  * \d{2}: 2位正整數，表示年份結尾;
  * ((0[1-9])|(10|11|12)): 月份，01-12月;
  * (([0-2][1-9])|10|20|30|31): 日期，01-31天,
  * \d{3}[0-9Xx]: 順序碼三位 + 一位校驗碼
  */

 <Item label="IDCard">
   {getFieldDecorator("IDCard", {
     initialValue: IDCard,
     rules: [
       {
         required: true,
         message: "請輸入身份證"
       },
       {
         required: false,
         pattern: new RegExp(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, "g"),
         message: '請輸入正確的身份證'
       }
     ],
    
   })(
     <Input placeholder="請輸入身份證" maxLength={18} autoComplete="off" />
  )}
</Item>

!!!~~~持續更新