SPA项目开发之CRUD+表单验证

表单验证

Form组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,
并将Form-Item的prop属性设置为需校验的字段名即可

   
   
   注1:有多个表单,怎么在提交进行区分?
        我们在rules这里写了对表单的验证规则,但是我们如何在methods里进行指定的表单进行认证,
        所以我们一开始就在el-form里写了 ref="ruleForm",我们在methods里就可以用


   注2:清空表单验证信息
        this.$refs[formName].resetFields();

el-dialog表单:


		
			
				
					
				
				
					
				
			
			
		

表单校验:


结果:
SPA项目开发之CRUD+表单验证_第1张图片

CUD

Articles.vue:


SPA项目开发之CRUD+表单验证_第2张图片
新增:
SPA项目开发之CRUD+表单验证_第3张图片
SPA项目开发之CRUD+表单验证_第4张图片
修改:
SPA项目开发之CRUD+表单验证_第5张图片
SPA项目开发之CRUD+表单验证_第6张图片
删除功能:
SPA项目开发之CRUD+表单验证_第7张图片

你可能感兴趣的:(Vue)