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

!!!~~~持续更新javascript

相关文章
相关标签/搜索