【表单校验】vue3+element-plus

1. 绑定ref

2. 使用动态rules

3. 勿忘定义ref变量，给el-form-item绑定prop绑定对应的变量

<el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
            >
              <el-form-item label="社团图片" prop="img">
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                >
                  <el-icon><Plus /></el-icon>
                  <template #file="{ file }">
                    <div>
                      <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url"
                        alt=""
                      />
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <el-icon><zoom-in /></el-icon>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleDownload(file)"
                        >
                          <el-icon><Download /></el-icon>
                        </span>
                        <span
                          v-if="!disabled"
                          class="el-upload-list__item-delete"
                          @click="handleRemove(file)"
                        >
                          <el-icon><Delete /></el-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                  <img
                    w-full
                    :src="dialogImageUrl"
                    alt="Preview Image"
                    class="dialog-img"
                  />
                </el-dialog>
              </el-form-item>
              <el-form-item label="社团名称" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="社团负责人" prop="responsible">
                <el-input v-model="ruleForm.responsible" />
              </el-form-item>
              <el-form-item label="社团联系方式" prop="phone">
                <el-input v-model="ruleForm.phone" />
              </el-form-item>
              <el-form-item label="社团代理老师" prop="teacher">
                <el-input v-model="ruleForm.teacher" />
              </el-form-item>
              <el-form-item label="社团规模" prop="delivery">
                <el-select
                  v-model="ruleForm.delivery"
                  placeholder="请输入社团人数"
                >
                  <el-option label="20" value="20" />
                  <el-option label="50" value="50" />
                  <el-option label="80" value="80" />
                  <el-option label="100" value="100" />
                  <el-option label="120" value="120" />
                  <el-option label="150" value="150" />
                  <el-option label="180" value="180" />
                  <el-option label="200" value="200" />
                </el-select>
              </el-form-item>
              <el-form-item label="社团所属学院" prop="college">
                <el-select v-model="ruleForm.college" placeholder="请选择学院">
                  <el-option label="计算机学院" value="计算机学院" />
                  <el-option label="旅游学院" value="旅游学院" />
                  <el-option label="信创学院" value="信创学院" />
                  <el-option label="机电学院" value="机电学院" />
                  <el-option label="空乘学院" value="空乘学院" />
                  <el-option label="纺织学院" value="纺织学院" />
                  <el-option label="商学院" value="商学院" />
                </el-select>
              </el-form-item>
              <el-form-item label="社团招新时间">
                <el-col :span="11">
                  <el-date-picker
                    v-model="ruleForm.date1"
                    type="date"
                    placeholder="开始时间"
                    style="width: 100%"
                  />
                </el-col>
                <el-col :span="2" class="text-center">
                  <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                  <el-date-picker
                    v-model="ruleForm.date2"
                    placeholder="结束时间"
                    style="width: 100%"
                  />
                </el-col>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                  提交
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
              </el-form-item>
 </el-form>

const ruleFormRef = ref()
const ruleForm = reactive({
  img: '',
  name: '',
  responsible: '',
  phone: '',
  teacher: '',
  delivery: '',
  college: '',
  date1: '',
  date2: '',
})
const rules = reactive({
  name: [
    { required: true, message: '请输入社团名称', trigger: 'blur' },
    { min: 3, max: 15, message: '长度必须为3-15位', trigger: 'blur' },
  ],
  responsible: [
    { required: true, message: '请输入社团负责人名称', trigger: 'blur' },
    { min: 3, max: 15, message: '长度必须为3-15位', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { min: 11, max: 11, message: '长度必须为11位', trigger: 'blur' },
  ],
  teacher: [
    { required: true, message: '请输入社团代理老师', trigger: 'blur' },
    { min: 3, max: 15, message: '长度必须为3-15位', trigger: 'blur' },
  ],
  delivery: [
    {
      required: true,
      message: '请选择社团规模',
      trigger: 'change',
    },
  ],
  college: [
    {
      required: true,
      message: '请选择社团所属学院',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
})
const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      alter('校验成功')
    } else {
      alter('校验失败')
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}