[09][创新实训记录]iView的表单验证

iView的表单验证

iView表单组件

iView提供了丰富的组件，其中制作精美并且功能齐全的表单验证就是我们本次创新实训中前端的重要部分，当然在其中也踩了不少坑

我们使用表单的地方有

新建或修改某一数据的时候

登录界面

iView中的表单验证以及丰富的Api可以实现很多的功能

踩坑

首先讲一下iView的表单组件的组成

html部分

<Form v-if="Modal" 
	ref="Form" 
	:model="formItem" 
	:label-width="100" 
	:rules="ruleInline" style="width: 550px;">
	<FormItem label="公告标题" prop="adminnoticeTitle">
		<Input v-model="formItem.adminnoticeTitle" placeholder="请尽量简洁地输入标题"/>
	</FormItem>
	<FormItem label="公告内容" prop="adminnoticeContent">
		<Input v-model="formItem.adminnoticeContent" type="textarea" :rows="8" placeholder="请输入对教务广播的公告内容" />
	</FormItem>
</Form>

javascript部分

data中需要定义

formItem1: {adminnoticeTitle: '',adminnoticeContent:'',},
ruleInline: {
	adminnoticeTitle: [
		{ required: true, message: '标题禁止为空', trigger: 'blur' }
	],
	adminnoticeContent: [
		{ required: true, message: '公告内容禁止为空', trigger: 'blur' }
	],
},

methods方法中表单验证

handleSubmit (name) {
	this.$refs[name].validate((valid) => {
		if (valid) {
			this.$Message.success('Success!');
		} else {
			this.$Message.error('Fail!');
		}
	})
},

遇到的问题

1. 无法进行表单验证？

   这是由于handleSubmit中的name需要制定<Form>标签中定义的ref，因此如果你没有定义ref的话是无法调用handleSubmit函数的

2. 输入了内容但是还是提示了在ruleInline规则数组中提示的message信息

   这是因为可能规定的格式是有问题的，就像是有的是有数字类型的那么应该怎么办呢？

   首先输入框要进行相应的定义，添加标签number

   <FormItem label="公告标题" prop="adminnoticeTitle">
   		<Input v-model="formItem.adminnoticeTitle" number placeholder="请尽量简洁地输入标题"/>
   </FormItem>
   

   其次需要在js验证不分部分要进行添加type

   adminnoticeTitle: [
   		{ required: true, type:'number', message: '标题禁止为空', trigger: 'blur' }
   ],
   

   这样表单验证才会生效

   更多的验证方法可以到官方文档学习查看