antd from验证input框只能输入数字【推荐】

问题：Input框中如果只能需要输入Id，也就是数字型字符串，需要进行验证。

解决办法：对其进行实时正则验证； /^[1-9]\d*$/

<Form.Item label='ID' >
  {
    getFieldDecorator('id', {
      rules:[{
        required:false,
        pattern: new RegExp(/^[1-9]\d*$/, "g"),
        message: '请输入正确的ID'
      }],
      getValueFromEvent: (event) => {
        return event.target.value.replace(/\D/g,'')
      },
      initialValue:''
    })(<Input  type="text" maxlength="11"/>)
  }
</Form.Item>

这样的操作就是输入框只能输入数字，输入字符是不被允许的，也就是输入不进去字符，从前端确保提交数据格式的正确性;

input number类型去掉上下加减箭头

如果使用type=“number”，则为造成能输入“-”、‘+’和“.”，在type为number的时候要可以输入加号、减号和小数点的。

input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

type属性设为number后控制不可输入e

原因:e在数学上代表2.71828，所以它也还是一个数字

解决方法：

<input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))' />

由于火狐里面没有 input type =“number” 这个设置，所以可以随机输入英文，

那么换一个方法，还是用正则：（设置 text类型，却只能输入数字，字母会自动删除）

<input  type="text" οnkeyup="this.value=this.value.replace(/[^\d]/g,'');"  >

限制输入框为只能输入最大为11为数字

<input type="text" placeholder="请输入手机号" autofocus="autofocus" autocomplete="off" oninput="if(value.length>11)value=value.slice(0,11)"  onkeyup="this.value=this.value.replace(/\D/g,'')"/>1

autofocus：文本输入字段被设置为当页面加载时获得焦点

autocomplete：自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项

**注释：**autocomplete 属性适用于

，以及下面的 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

oninput：事件在用户输入时触发

onkeyup：用户释放键盘按钮时出发

input数字number类型的时候maxlength无效

解决方法：超出截取

<input type="number" oninput="if(value.length>11)value=value.slice(0,11)" />  

1、限制 input 输入框只能输入纯数字

onkeyup = "value=value.replace(/[^\d]/g,'')"

2、使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母

onchange = "value=value.replace(/[^\d]/g,'')"

3、使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应

oninput = "value=value.replace(/[^\d]/g,'')"

使用 oninput 事件，完美的解决了以上两种问题，测试暂时还没有出现其它问题。【推荐】

<input type="text" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"  placeholder="请输入您的手机号">

密码输入为6-16为数字和字母的组合

<input type="password" placeholder="请输入密码"  autocomplete="off" oninput="if(value.length>16)value=value.slice(0,16)" onKeyUp="value=value.replace(/[\W]/g,'')" />