vue3.0后台管理项目（day15）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

上一篇文章中我们完成编辑，新增，删除这些按钮的弹出框，接下来我们将引入rules校验规则，如果用户未输入就提示用户无法提交表单，只有用户全部输入了才可以成功提交表单。

1. 首先，这个提交框给用户的提示如下图所示：

2. 我们在提交框里面的提交按钮绑定一个提交事件并且传入userForm这个校验规则，还有取消按钮绑定一个关闭对话框的功能，具体的代码如下所示：

 <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm(userForm)">提交</el-button>
      </span>
    </template>

3. 然后我们需要创建一个rules校验规则，这是个动态的数据，需要使用reactive来创建，给name,address,phone,state这四个属性都添加上这是必填项，即将required赋值为true,具体的代码如下所示：

const rules = reactive({
  name: [{ required: true, message: "此项为必填项", trigger: "blur" }],
  address: [{ required: true, message: "此项为必选项", trigger: "blur" }],
  phone: [{ required: true, message: "此项为必填项", trigger: "blur" }],
  state: [{ required: true, message: "此项为必填项", trigger: "blur" }],
});

4. 在这之前我们还需要创建name.address.phone,state这四个可变的数据，创建的方式如下图所示：

5. 接下来我们还需要引入ElMessage以及ElMessageBox，这个组件需要我们手动引入，当然也可以在main.js入口文件全局引入，这个就是在页面窗口上方弹出提示来提醒用户的效果

6. 准备完成之后就需要调用提交的方法并且校验是否符合规则了。