关于vue.js element ui 表单验证使用this.$refs[formName].validate()

本文链接：https://blog.csdn.net/qq_41008567/article/details/115939951

本文介绍了如何在Vue.js项目中使用Element UI库进行表单验证，包括简易版和复杂版的表单提交流程，涉及表单model绑定、校验规则设定、$refs获取及表单验证方法的调用，确保所有必填项通过验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现form表单提交验证功能

model : 绑定整个表单model值
rules : 整个表单校验规则
ref ：获取该表单form组件
prop : 绑定每个表单的规则，写在el-form-item上
validate : 对整个表单进行校验的方法
valid : 每个必填表单项都提交为true,否则为false

1、简易版表单提交

//使用element-ui 页面组件
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	<el-form-item label="活动名称" prop="name">
		<el-input v-model="ruleForm.name"></el-input>
	</el-form-item>
	
	<el-form-item label="活动区域" prop="region">
	    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
	      <el-option label="区域一" value="shanghai"></el-option>
	      <el-option label="区域二" value="beijing"></el-option>
	    </el-select>
  	</el-form-item>
</el-form>
 <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </el-form-item>

//data中定义form表单中每项表单model值、和每个表单校验的规则
<script>
  export default {
   
    data() {
   
      return {
   
        ruleForm: {
   
          name: '',
          region: '',
        },
        rules: {
   
          name: [
            {
    required: true, message: '请输入活动名称', trigger: 'blur' },
            {
    min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            {
    required: true, message: '请选择活动区域', trigger: 'change' }
          ],      
      };
    },

//定义表单提交方法
	methods: {
   
	     submitForm(formName) {
   
	       this.$refs[formName].validate((valid) => {
   
	         if (valid) {
   
	           alert('submit!');
	         } else {
   
	           console.log('error submit!!');
	           return false;
	         }
	       });
	     },
	   }
 }

2、复杂版表单提交

对于页面有多个整体的form提交，每个form表单里类型为文本框、下拉框、单选框、复选框等类型，可对类型进行封装，使用循环遍历使页面呈现不同类型表单项

<el-form v-if="fromHtmlList.deviceInfo.sitsb.length" :model="fasj" :rules="rules" label-position="left" label-width="125px" ref='sitsb'>
    <el-form-item label-width="100%" >
        <div slot="label" class="titleInfo">局端设备</div>
    </el-form-item>  
    <el-form-item v-for="(item, i) in fromHtmlList.deviceInfo.sitsb"
    :key="`F_key_${i}`"
    :label="`${item.label}：`" 
    :class="item.class"
    :label-width="item.labelWidth"
    :prop="`${item.rule ? 'deviceInfo.sitsb.'+item.rule : ''}`">
        <el-select v-if="item.el === 'slt'" v-model="fasj.deviceInfo.sitsb[item.model]" placeholder="请选择" style="width:200px;" clearable>
            <el-option v-for="(op, n) in options[item.option]"
                :key="`vop_key_${n}`"
                :label="op.label"
                :value="op.value">
            </el-option>
        </el-select>   
                 
        <el-input  v-if="item.el === 'ipt'" v-model="fasj.deviceInfo.sitsb[item.model]" @focus="()=>{ item.focus && handleFocus('sits