Vue 自定义输入框组件校验金额

ShenSJay

已于 2022-03-28 18:11:09 修改

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue

于 2022-03-28 18:10:15 首次发布

本文链接：https://blog.csdn.net/qq_32234855/article/details/123802023

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<body>
  <div id="app">
    <amount-input :value="amount" @change="onChange"></amount-input>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    Vue.component('amount-input', {
      template: '<input :value="value" @change="updateVal($event.target.value)" type="text">',
      props: ["value"],
      methods: {
        updateVal: function(val) {
          this.$emit('change', val);
        }
      }
    });
    const app = new Vue({
      el:"#app",
      data:{
      },
      components:{
      },
      methods: {
        onChange: function(val) {
          // alert(val)
          const exp = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,6})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/;
          if (!exp.test(val)) {
            alert('不符合金额规则')
          }
          this.amount = val;
        }
      }
    })
  </script>
</body>