金额输入框值处理、短信验证码输入框仅支持输入数字

WhaleHumpback

于 2023-12-01 13:43:23 发布

阅读量566

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_40851816/article/details/134732726

版权

文章详细描述了在Vue组件中，如何使用el-input组件进行自动完成并验证输入的金额，涉及字符串转换、正则表达式过滤和数字格式校验的过程。第二个方法仅支持纯数字输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM：

<el-input
    auto-complete="off"
    maxlength="6"
    placeholder="请输入验证码"
    v-model="resetForm.verifyCode"
    @input="value => {
      checkMoney(value)
    }"
></el-input>

methods：

checkMoney(val) {
  const result =
    ('' + val) // 第一步：转成字符串
      // eslint-disable-next-line no-useless-escape
      .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
      .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
      .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
      .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
  this.loginForm.verifyCode = result
},

上面为对金额的处理

checkMoney(val) {
  const result =
    ('' + val) // 第一步：转成字符串
      .replace(/[^\d]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
  this.resetForm.verifyCode = result
},

这个为仅支持数字