element-UI el-input限制为“数字输入”

需求：

表单中的input需要设定为数字

---

方法一

将绑定值类型为：number，并在表单验证中添加规则。

对于数字类型的校验，需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

<el-form-item prop="zipCode" label="邮编 :">
     <el-input 
          placeholder="请输入邮编" 
          maxlength="6"
          v-model.number="trafficForm.zipCode">
      </el-input>
</el-form-item>

zipCode: [
    {required: true, message: '请输入邮编', trigger: 'blur'},
    { type: 'number', message: '必须为数字值'}
],

 

方法二

将 input控件属性 type（类型）改为 number

<el-form-item prop="number" label="数量">
    <el-input maxlength="4" placeholder="请输入数量" 
        v-model="Form.number"
        type='number' min='0'>
        </el-input>
</el-form-item>

加上min='0' ，只是限制了鼠标上下滚动的值不为负数 

number: [
    {required: true, message: '请输入数量', trigger: 'blur'},
    { validator: validatePass, trigger: 'blur' }
],

自定义验证规则 

const validatePass = (rule, value, callback) => {
    if (value < 0) {
        callback(new Error('值不能小于0'));
    }else{
        callback();
    }
};