vue el-input输入框输入纯数字

最新推荐文章于 2025-09-24 12:42:38 发布

转载最新推荐文章于 2025-09-24 12:42:38 发布 · 3.6k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_40137911/article/details/84754029?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

前端日常专栏收录该内容

65 篇文章

订阅专栏

本文介绍了一种在Vue框架中实现表单输入字段验证的方法，通过监听输入事件并使用正则表达式来确保输入的数据格式正确。具体实现了对成绩字段的数字验证，去除非法字符，确保输入为纯数字。

参考原文作者：

https://blog.youkuaiyun.com/weixin_40137911/article/details/84754029?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3&utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-3

<el-form-item
        label="成绩"
        prop="number">
        <el-input
          v-model="form.number"
          placeholder="长度大于x位且纯数字编号"
          @keyup.native="proving"/>
      </el-form-item>

export default {
  props: {
  },
  data() {
    return {
      form: {
        number: '',
      }
    }
  },
  created() {
 
  },
  methods: {
    proving() { // 监听：
      this.form.number = this.form.number.replace(/[^\.\d]/g, '')
      this.form.number = this.form.number.replace('.', '')
    }
 }