element控制input输入为数字

input控制输入数字

方式一：通过正则表达式控制

这种方式是在输入不是数字的符号是转换为’’

<el-input 
 v-model="number" 
 oninput="value=value.replace(/[^\d]/g,'')" 
 placeholder="number">
</el-input>

方式二：通过表单验证规则控制

<el-form-item label="年龄" prop="age" :rules="[{ validator: checkAge, trigger: 'blur' }]">
    <el-input v-model.number="ruleForm.age" ></el-input>
</el-form-item>

data() {
      var checkAge = (rule, value, callback) => {
          if (value &&!Number.isInteger(value)) {
            return callback(new Error('请输入数字值'));
          }else{ 
          return callback();
          }
      };
      return {
        checkAge,
        ruleForm: {
          age: ''
        },
      };
    },

控制input输入为两位数的小数，并且第一位不为.或者0

<el-input oninput="value=value.replace(/[^\d.]/g, '')
	.replace(/\.{2,}/g, '.').replace('.', '$#$')
	.replace(/\./g, '').replace('$#$', '.')
	.replace(/(\d+)\.(\d\d).*$/, '$1.$2')
	.replace(/^0|^\./g, '')" 
	v-model="value" size="small">
</el-input>