diff --git a/src/App.vue b/src/App.vue
index bd305ce..317647b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
Form Demo 1: 基本使用
Form Demo 2: 行内表单
+ Form Demo 3: 表单验证
diff --git a/src/router/index.js b/src/router/index.js
index 0abf342..a5bec65 100644
--- a/src/router/index.js
+++ b/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
diff --git a/src/views/Form_Demo3.vue b/src/views/Form_Demo3.vue
index 23a4233..14725c1 100644
--- a/src/views/Form_Demo3.vue
+++ b/src/views/Form_Demo3.vue
@@ -1,9 +1,9 @@
-
+
-
+
@@ -12,20 +12,24 @@
-
+
+
+
-
-
+
+
+
-
+
-
+
@@ -33,23 +37,23 @@
-
+
-
+
-
+
- 创建
- 取消
+ 创建
+ 取消
@@ -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()
+ }
}
}