VUE+element-ui使用rules在提交时对form表单进行校验

步骤
1.配置el-form
在你的form表单中增加rules的配置，如

<el-form ref="addFrom" :rules="rules" :model="addFrom" label-width="120px">
	...
</el-form>

2.配置el-form-item
在对应的字段增加prop属性，如（注意此处prop属性要跟步骤3对应）

<el-form ref="addFrom" :rules="rules" :model="addFrom" label-width="120px">
	 <el-form-item label="此处为金额" prop="Price">
     	<el-input v-model="addFrom.price" placeholder="请输入"></el-input>
     </el-form-item>
</el-form>

3.配置规则
在export default的data中增加rules的规则配置

export default {
    ...
    data() {
        return {
            ...
            rules: {
                price: [{ required: true, message: '不能为空', trigger: 'blur' }]
            },
            ...
        }
    },

4.提交时增加方法

//点击提交的方法
riskSubmit(){
		//进行表单验证
        this.$refs.updateForm.validate(valid => {
       		//表单验证失败
            if (!valid) {
            	//提示语
            	this.$message("提示语");
                return false;
            }
            //这里可以写表单验证通过之后执行的代码
            //.......
        });
    },

通过以上四步，则可以完成提交时对表单进行校验