完成验证的学习

src/App.vue

@@ -2,6 +2,7 @@
   <div>
     <router-link :to="{name:'form1'}">Form Demo 1: 基本使用</router-link><br>
     <router-link :to="{name:'form2'}">Form Demo 2: 行内表单</router-link><br>
+    <router-link :to="{name:'form3'}">Form Demo 3: 表单验证</router-link><br>
   </div>
   <hr>
   <div>

src/router/index.js

@@ -4,6 +4,7 @@ import {createRouter, createWebHistory} from 'vue-router'
 // const root = () => import('../App.vue')
 const formDemo1 = () => import('../views/Form_Demo1.vue')
 const formDemo2 = () => import('../views/Form_Demo2.vue')
+const formDemo3 = () => import('../views/Form_Demo3.vue')
 
 
 // 引入组件
@@ -21,6 +22,11 @@ const routes = [
         name: 'form2',
         component: formDemo2
     },
+    {
+        path: '/form3',
+        name: 'form3',
+        component: formDemo3
+    },
 ]
 
 // 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes

src/views/Form_Demo3.vue

@@ -1,9 +1,9 @@
 <template>
   <el-form :model="form" size="small" label-width="120" label-position="left" :rules="rules" ref="form">
-    <el-form-item label="活动名称" style="width: 400px">
+    <el-form-item label="活动名称" prop='name' style="width: 400px">
       <el-input v-model="form.name" maxlength="10" show-word-limit placeholder="请输入活动名称"></el-input>
     </el-form-item>
-    <el-form-item label="活动地点">
+    <el-form-item label="活动地点" prop="region">
       <el-select v-model="form.region" filterable placeholder="请选择活动区域">
         <el-option label="北京" value="beijing"></el-option>
         <el-option label="上海" value="shanghai"></el-option>
@@ -12,20 +12,24 @@
     <el-form-item label="活动时间">
       <el-row style="width: 400px">
         <el-col :span="11">
+          <el-form-item prop="date1">
             <el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%"></el-date-picker>
+          </el-form-item>
         </el-col>
         <el-col :span="2" class="text-center">
           <span class="text-gray-500">-</span>
         </el-col>
         <el-col :span="11">
+          <el-form-item prop="date2">
             <el-time-picker v-model="form.date2" placeholder="选择时间"></el-time-picker>
+          </el-form-item>
         </el-col>
       </el-row>
     </el-form-item>
-    <el-form-item label="是否直播">
+    <el-form-item label="是否直播" prop="delivery">
       <el-switch v-model="form.delivery"></el-switch>
     </el-form-item>
-    <el-form-item label="活动类型">
+    <el-form-item label="活动类型" prop="type">
       <el-checkbox-group v-model="form.type">
         <el-checkbox label="线上活动" name="type"></el-checkbox>
         <el-checkbox label="线下活动" name="type"></el-checkbox>
@@ -33,23 +37,23 @@
         <el-checkbox label="新品发布" name="type"></el-checkbox>
       </el-checkbox-group>
     </el-form-item>
-    <el-form-item label="场地资源">
+    <el-form-item label="场地资源" prop="resource">
       <el-radio-group v-model="form.resource">
         <el-radio label="自助"></el-radio>
         <el-radio label="赞助"></el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="参与人数">
+    <el-form-item label="参与人数" prop="number">
       <!--      <el-input-number v-model="form.number" min="0" max="10"></el-input-number>-->
       <el-input v-model="form.number" type="number" min="0" max="10" placeholder="请输入参与人数"
                 style="width: 120px;"></el-input>
     </el-form-item>
-    <el-form-item label="备注">
+    <el-form-item label="备注" prop="desc">
       <el-input v-model="form.desc" type="textarea" maxlength="400" show-word-limit style="width: 400px"></el-input>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary" @click="submit">创建</el-button>
-      <el-button @click="cancel">取消</el-button>
+      <el-button type="primary" @click="formSubmit('form')">创建</el-button>
+      <el-button @click="formReset('form')">取消</el-button>
     </el-form-item>
   </el-form>
 </template>
@@ -93,29 +97,26 @@ export default {
           }
         ],
         type: [{required: true, type: 'array', message: '至少选择一个活动类型', trigger: 'change'}],
-        resource: [{required: true, message: '请选择活动资源', trigger: 'change'}]
+        resource: [{required: true, message: '请选择活动资源', trigger: 'change'}],
+        number: [{required: true, message: '请输入参与人数', trigger: 'blur'}],
+        desc: [{required: true, message: '请填写备注', trigger: 'blur'}]
       },
     }
   },
   methods: {
-    submit() {
-      console.log('created')
-      console.log(this.form)
-    },
-    cancel() {
-      console.log('cleared')
-      this.form = {
-        name: "",
-        region: "",
-        date1: "",
-        date2: "",
-        delivery: false,
-        type: [],
-        resource: "",
-        number: "",
-        desc: "",
+    formSubmit(formName){
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('提交成功！');
+        }else{
+          console.log('提交失败');
+          return false;
         }
+      })
     },
+    formReset(formName){
+      this.$refs[formName].resetFields()
+    }
   }
 }
 </script>