账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何保证移动端vue只能输入金额?
    26
    0

    如何保证移动端的vue项目,在input中只能输入金额?包括数字和小数点。 发现如果调type=‘tel’的话只有数字没有小数点,调type=‘number’还有其他符号。 监听input动作来去掉符号发现也不行,不知道是不是自己代码的问题。

      <input ref="content" type="number" pattern="[0-9]{,6}" @input="handleAmountChange"  v-model.number.trim="money"  />
        handleAmountChange(e) {
          this.money = e.target.value.replace(/[^\d]/g, '')
          // 必须保证第一个为数字而不是.
          this.money = this.money.replace(/^\./g, '0.')
          // 保证只有出现一个.而没有多个.
          this.money = this.money.replace(/\.{2,}/g, '.')
          // 保证.只出现一次,而不能出现两次以上
          this.money = this.money
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
          // 只能输入两个小数
          this.money = this.money.replace(/^()*(\d+)\.(\d\d).*$/, '$1$2.$3')
        },
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 發爹腦殼發卡。 普通会员 1楼

      在移动端Vue中,你可以通过以下方式来限制用户只能输入金额:

      1. 使用限制输入的规则:你可以使用JavaScript来创建一个规则,检查用户输入的字符是否在允许的字符范围内。例如,你可以使用正则表达式来检查输入的字符是否为数字或字母。以下是一个简单的示例:

      ```javascript const input = document.getElementById('input'); const regex = /^[0-9]+$/;

      input.addEventListener('input', function() { if (!regex.test(input.value)) { alert('请输入数字'); } }); ```

      1. 使用自定义输入事件:你可以为每个输入字段创建一个自定义事件,当用户输入数据时,触发这个事件。你可以在这个事件中检查用户输入的数据是否符合你的要求。以下是一个简单的示例:

      javascript document.getElementById('input').addEventListener('input', function(event) { if (!event.target.value.match(/^[0-9]+$/)) { alert('请输入数字'); } });

      1. 使用限制输入的插槽:你可以为每个输入字段创建一个插槽,当用户输入数据时,触发这个插槽。你可以在这个插槽中检查用户输入的数据是否符合你的要求。以下是一个简单的示例:

      ```html

      {{ value }}

      ```

      在上述代码中,v-model属性用于双向数据绑定,placeholder属性用于显示输入提示。当用户输入数据时,这个插槽中的数据将被绑定到value属性中。然后,你可以在这个插槽中检查用户输入的数据是否符合你的要求。

      请注意,这些方法都需要在Vue实例的data属性中定义一个名为value的变量,并且这个变量应该在输入事件中被更新。例如:

      javascript data() { return { value: '' } }

      在上述代码中,value变量在输入事件中被更新。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部