el-form的表单验证方法

由于一直以来都是修改页面的部分内容
既然发现自己连一直在用的el-form的表单验证都不会

<el-dialog :title="上传文件对话框" width="40%" :visible.sync="upload_DialogVisible"  :close-on-click-modal="false">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
//ref用于提交方法submitForm_upload中的表单验证 this.$refs[formName].validate((valid) => {	});
	<el-form-item label="活动名称" prop="name">
   		<el-input v-model="ruleForm.name"></el-input>
  	</el-form-item>
	<el-form-item>
    	<el-button :size="size" type="primary" @click="submitForm_upload('ruleForm')">提交</el-button>
    	//@click="submitForm_upload('ruleForm')"传数据data里的ruleForm给submitForm_upload()方法,
    	//使得
    	//submitForm(formName) {
        //this.$refs[formName].validate((valid) => //});
		  //},
	      //resetForm(formName) {//forName是<el-button :size="size" type="primary" @click="submitForm_upload('ruleForm')">提交</el-button>传过来的
        //this.$refs[formName].resetFields();
      	//}
    //}
 	 </el-form-item>
</el-form>
</el-dialog>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          }
         }
        }
       }
</script>
 methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {//验证表单
          if(valid){
					this.$confirm('确认提交吗?','提示',{}).then(()=>{
						let params = Object.assign({},this.ruleForm)//把数据给params					this.$api.TestPage.updateExamstatus(params).then((res)=>{
							if(res.code == 200) {
								this.$message({ message: '操作成功', type: 'success' })
							} else {
								this.$message({message: '操作失败, ' , type: 'error'})
							}
							this.upload_DialogVisible = false//上传成功后不显示此对话框
							this.$refs[formname].resetFields()//上传成功之后重置表单formname的数据
							this.findPage(null)//上传成功之后调用显示页面的数据
						})
					})
				}
        });
      },     
    }
  }

注意点:
1<el-form></el-form>的ref是需要有的,用于表单验证
2<el-form></el-form>的:model是要有的,绑定表单form的数据,这里绑定的是:model="ruleForm"
3点击提交按钮的时候,需要调用方法,提示传数据给上传方法submitForm,
这里传的是数据ruleForm

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值