【无标题】

---

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、element-ui 关于表单校验提交验证的使用

1.代码示例

代码如下（示例）：

<template>
	<el-form :model="ruleForm"  :rules="rules" ref="ruleForm"  >
	  <el-form-item label="候选人" prop="owner">
	    <el-input v-model="ruleForm.ownerdata"></el-input>
	  </el-form-item> 
	  <el-form-item>
	    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
	    <el-button @click="resetForm('ruleForm')">重置</el-button>
	  </el-form-item>
	</el-form>
</template>
<script>
export default {
	data(){
		var checkownerID= (rule,value,callback) => {
			if(!value){ //可以更改判定条件
				return callback(new Error('候选人不能为空'))
			}else{
				return callback()   //没有会使this.$refs[formName].validate有问题
			}
		}
		return {
			ruleForm:{
				ownerdata:"",
			},
			rules: {
				owner:[
					{required:true,validator:checkownerID,message:'候选人不能为空'}
				]
			}
		}
	} 
	methods: {
	     submitForm(formName) {
	       this.$refs[formName].validate((valid) => {
	         if (valid) {
	           alert('submit!');
	         } else {
	           console.log('error submit!!');
	           return false;
	         }
	       });
	     }, 
	}     
</script>

2.要点提示

1.ref标记表单名字，之后在refs获取表单
2.resetForm('ruleForm'),// 把需要提交校验的表单名字传下拉，方便在方法中获取表单名字
3.validate要写成回调函数

---