vue el-form rules校验number类型踩坑（v-model指令的修饰符）及 限制number的长度

使用el input时，type已设置为number类型，但在rules验证中，无法通过number的验证，发现输出的是string
```html
<el-input
v-model="form.month"
max="24"
min="1"
placeholder="请输入数字"
style="width: 300px"
type="number"
>
```
面向百度编程后，发现需要在v-model后面加入 `.number`
```html
<input v-model.number="age" type="number">
```
官方文档说明：
> 使用修饰符.number可以将输入的数据转换为Number类型，否则虽然你输入的是数字.但它的类型其实是String ，因为即使在 input的type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

```html
<!--这里返回的值是字符串-->
<input id="model1" v-model="age1" type="number"><br>
<!--用了.number将返回的字符串转成数字-->
<input id="model2" v-model.number="age2" type="number">
```

但此时会埋下一个大坑：输出的时候是Number类型，因为在内部帮你把数据做了转化Number(order) 输出
```js
Number('152845125481254538') // 152845125481254530
Number('152845125481254532') // 152845125481254530
Number('152845125481254534') //152845125481254530
Number('152845125481254523') // 152845125481254530
```
看到这里就会发现 Number() 转化后数据会发生改变，所以在使用 `v-model.number` 数据会发生不可控制的改变

# 限制number的输入长度

本想通过rules的min和max属性来限制长度，但是发现number不能限制，看来只是string才支持，改为pattern属性使用正则来解决，这样一来，上面的.number修饰也不需要使用了。。。。

```ts
{ pattern:/^\d{1,3}$/, message: '长度在 1 到 3 个字符', trigger: 'blur' }
```