提交提单前的验证

src/components/users/users.vue

@@ -56,7 +56,7 @@
 
     </el-card>
 
-    <el-dialog title="添加用户" :visible.sync="dialogVisible">
+    <el-dialog title="添加用户" :visible.sync="dialogVisible" @close="formClose">
       <!--内在主体区-->
 
       <el-form :model="addForm" :rules="rules" ref="addFormRef" label-width="70px" >
@@ -72,16 +72,13 @@
         <el-form-item label="手机" prop="mobile">
           <el-input v-model="addForm.mobile"></el-input>
         </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
-          <el-button @click="resetForm('ruleForm')">重置</el-button>
-        </el-form-item>
+
       </el-form>
 
       <!--底部区-->
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
       </span>
     </el-dialog>
 
@@ -141,8 +138,16 @@ export default {
     }
   },
   methods: {
-    submitForm (form) {
-
+    formClose () {
+      this.resetForm()
+    },
+    submitForm () {
+      this.$refs.addFormRef.validate(validate => {
+        if (!validate) {
+          return
+        }
+        this.dialogVisible = false
+      })
     },
     resetForm () {
       this.$refs.addFormRef.resetFields()