【Vue3.0实战逐步深入系列】为问卷主题添加必填项配置及数据有效性校验功能

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】

前言

小伙伴们大家好。今天将带着大家继续来完善我们的问卷调查功能。到目前为止我们的问卷调查功能已经实现了问卷主题配置、问卷结果提交，问卷结果保存及回填，问卷结果展示等基本功能。看上去貌似一个问卷调查功能已经实现了，然而还有一个比较重要的功能没有实现，那就是数据有效性校验功能，想想如果没有数据有效性的校验，打开一个问卷什么都不填就直接提交，那就失去了问卷调查的意义了。因此本文将在前面分享的基础上增加数据有效性校验功能。

需求描述

要添加数据有效性校验，我们需要实现如下几条需求（功能点）

• 每个问卷主题是否是必填项可由问卷发布者自行配置
• 如果问卷主题是必填项，则需在问卷标题前添加一个红色星号（*）提示
• 当用户点击提交按钮时进行数据有效性校验，如果有未填写的问卷主题，则应在相应问卷标题下方给出红色字体的信息提示（数据无效）同时代码停止继续向下执行
• 当用户将无效数据补充完整后，红色提示信息自动消失
• 页面在第一次加载的时候所有的数据都是空的，这时候不应该显示红色提示信息，只有点击了提交按钮后才应该提示

需求已经基本明确，下面就按照这些需求一步步来实现数据有效性的校验

配置数据源

上面需求已经明确要求问卷主题是否必填由问卷发布者自行定义，而问卷发布着是不可能去修改代码的，因此我们就得从数据源着手实现。大体思路就是在数据源中为每个问卷主题添加以个required字段用来标识该主题是否是必填项。进而通过该字段来控制页面是否显示红色星号和红色提示信息。修改后的数据源代码如下：

// public/data.json
// 新增required字段 类型为boolean类型
{
   
    "data":[
        {
   "id":1,"title":"Vue3.0好学吗？", "required": true}
    ],
    "radios":[
        {
   "id":1,"title":"您对公司的福利是否满意？","items":["非常满意","满意","基本满意","不满意"]},{
   "id":2,"title":"您对当前的收入是否满意？","items":["非常满意","满意","基本满意","不满意"], "required": true}
    ],
    "checks":[
        {
   "id":1,"title":"您还希望公司增加哪些福利？","items":["涨工资","涨饭补","发女朋友","以上都要"], "required": true}
    ],
    "inputs":[
        {
   "id":1,"title":"您有什么想对公司说的？", "required": true},
        {
   "id":2,"title":"随便说点啥吧", "required": true}
    ],
    "stars":[
        {
   "id":1,"title":"请给本次分享打个分吧！","items":["糟糕","失望","一般","很好","非常好"], "required": true}
    ]
}

封装header.vue组件