ViewUI表单数值类型验证

ViewUI表单数据验证的时候常常会碰到数值类型验证出错的问题：

<template>
	<Form ref="form" :model="form" :rules="rule">
		<FormItem prop="id">
			<Input type="text" v-model="form.id" placeholder="输入数值类型" number />
		</FormItem>
		<FormItem>
			<Button type="primary" @click="loginClick('form')">确定</Button>
		</FormItem>
	</Form>
</template>

我们可以在 Input 标签上添加 number 标识就可以将用户的输入转换为 Number 类型。由于这种模式跟 InputNumber 标签不一样，它不会过滤用户输入数据，所以为了确保输入的数据是数值型，我们还应当配合rules规则进行限定：

<script>
	export default {
		name: 'about',
		data() {
			return {
				form: {
					id: 0,
				},
				rule: {
					id: [
						{ required: true, type: 'number', message: '必须输入数值' },
					],
				},
			};
		},
	};
</script>