antd表單常用驗證規則

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. 身份證校驗

 <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>