vue里表单验证的v-model.number的坑

vue里表单验证的v-model.number的坑

问题：表单验证正则匹配数字，但输入汉字仍然通过
原因：.number会将input里的值用parseFloat()转化，这样用正则匹配数字后，输入的即使是：123四五六；也不会报错，因为123四五六被转换成了123

解决办法：将.number去除即可

除了.number修饰符外，还有 .lazy 、 .trim
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.trim

<!--如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符->
<input v-model.trim="msg">