vue 项目 input 输入内容的限制

2019独角兽企业重金招聘Python工程师标准>>>

一、 限制输入框输入的位数

属性： maxlength=“8”

<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/>

二、自动过滤用户输入的首尾空白符

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

方法二： 也可以用vue的.trim   API

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

三、只能输入数字字母和中文

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

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

方法一：  vue 的.number

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

转载于:https://my.oschina.net/u/3608045/blog/1635846