vue 项目 input 输入内容的限制

时间 2019-11-17

标签 vue 项目 input 输入内容限制繁體版

原文原文链接

1、限制输入框输入的位数html

属性： maxlength=“8”vue

<input id="amount" type="tel" class="lang-detail-input" maxlength="8" ref="amount" autocomplete="off" placeholder="100" v-model="amount"
					 @focus="amountInit" @input="amountInit" number/>

2、自动过滤用户输入的首尾空白符数组

方法一： 用字符串的trim方法
this.amount = this.amount.trim()    // 不改变原数组

方法二： 也能够用vue的.trim   API

<input v-model.trim="msg" type="number">

3、只能输入数字字母和中文this

// eslint-disable-next-line
  var reg = /^[A-Za-z0-9\u4e00-\u9fa5\.]+$/
if (!reg.test(this.amount)) {
    return 提示输入格式错误
}

4、限定输入的值返回出来是数字eslint

方法一：  vue 的.number

<input v-model.number="msg" type="number">
由于有时即便用了type="number"       html输入元素的值也总会返回字符串