【表单校验】vue3+element-plus

1. 绑定ref

2. 使用动态rules

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

              
                
                  
                  
                
                
                  
                
              
              
                
              
              
                
              
              
                
              
              
                
              
              
                
                  
                  
                  
                  
                  
                  
                  
                  
                
              
              
                
                  
                  
                  
                  
                  
                  
                  
                
              
              
                
                  
                
                
                  -
                
                
                  
                
              
              
                
                  提交
                
                重置
              
 

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()
}