iView/ElementUI的表单验证type='number'输入number类型无效填坑

382 阅读1分钟

iView/ElementUI的表单验证做表单验证的时候,框架默认使用的是async-validator,验证规则type='number'时,输入数字还报错,是因为输入的数字其变量类型是字符,所以导致验证失败。找了一些资料看到了官方的解决方案,在v-model后面加.number,即:v-model.number,完整示例如下:

验证不通过代码:

<el-form-item
	label="排序"
	prop="order"
	:rules="[
		{
			type: 'integer',
			message: '只能是数字',
			trigger: 'blur',
		},
	]"
>
	<el-input
		v-model="formData.order"
		clearable
		:maxlength="10"
		placeholder="请输入排序,数字越大越靠前"
	/>
</el-form-item>

验证通过代码:

<el-form-item
	label="排序"
	prop="order"
	:rules="[
		{
			type: 'integer',
			message: '只能是数字',
			trigger: 'blur',
		},
	]"
>
	<el-input
		v-model.number="formData.order"
		clearable
		:maxlength="10"
		placeholder="请输入排序,数字越大越靠前"
	/>
</el-form-item>

仔细比对哦。