【Vue】ElementUI表单验证，rule验证数字类型 input输入数字报不是数字 input用表单验证限制数字输入

elementUI数字验证 input验证是否为数字,表单验证

阿民不加班

2783人浏览 · 2022-07-20 16:48:47

阿民不加班 · 2022-07-20 16:48:47 发布

一个form表单验证
这个输入框，我需要它为数字类型，但是又要控制长度，
然后代码如下

<el-form-item label="排序" prop="orderNum">
     <el-input  v-model="form.orderNum" maxlength="4" show-word-limit placeholder="请输入序号" />
</el-form-item>

显示如下
在这里插入图片描述
如果加上type=“number”的话，长度限制和后面的0/4都没了，变成了数字格式独有的上下箭头

输入数字显示
在这里插入图片描述

如何解决?

在v-model后面加上 .number
转换类型就好了

 <el-input  v-model.number="form.orderNum" maxlength="4" show-word-limit placeholder="请输入序号" />

在这里插入图片描述

附上验证规则

orderNum: [
          // { required: true, message: "排序不能为空", trigger: "blur" },
          { type: 'number', message: '排序必须为数字值', trigger: "blur" }
        ]

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^