vue el-input纯数字校验

vue el-input纯数字校验 只能输入数字

自我记录

踩坑 1和2 都不是很完美

3和4原理就是使用正则输入的时候替换成空字符oninput="value=value.replace(/\D/g,'')"

5就是表单校验但只是提示用户

1.通过设置type属性：type="number"，会有样式问题(通过css也能干掉) 不建议使用

<el-input type="number" v-model="form.value"/>

2.通过绑定值限制的方式：v-model.number="form.value" e 和 . 都可以输入一次 不建议使用

<el-input type="number" v-model="form.value"/>

3.写完传给后端的值是字符串

<el-input v-model="form.value" oninput="value=value.replace(/\D/g,'')" placeholder="请输入内容纯数字"/>

4.写完01就变成1了 js Number 机制

<el-input v-model.number="form.value" oninput="value=value.replace(/\D/g,'')" placeholder="请输入内容纯数字"/>

5.表单校验提示

    <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
      <el-form-item
          label="年龄"
          prop="value"
          :rules="[
      { required: true, message: '年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
      >
        <el-input v-model.number="form.value" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>

  data() {
    return {
      form: {
        value:''
      }
    }
  },
  methods:{
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.form.value)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}

看实际需求我公司项目用的是 第四种去零

如有转载 请备注原文地址!