Vue项目在表单中限制输入数字
<template> <div> <input v-model="userPhone" autofocus type="text" maxlength="11" placeholder="请输入11位手机号" @input="handlePhone" @keyup.enter="handleLogin" > <button type="button" @click="handleLogin">登录</button> </div> </template>
JavaScript部分
<script> export default { data () { return { userPhone: '' } }, methods: { handlePhone (e) { this.userPhone = e.target.value.replace(/[^\d]/g, '') }, handleLogin () { if (this.userPhone.length === 11) { console.log('登录成功') } } } } </script>
注意重点:表单的内容改变必须使用input事件来处理,必须随时监测表单输入的内容,不能使用watch和change,因为输入法在输入中文的时候监测不到,还要注意的就是表单input的type类型为number的时候移动端可以输入字母e,因为是科学计算法,还可以输入运算符(+,-,*,/)等等。