Vue项目如何实现表单必填校验，点击创建按钮时空值弹出alert提示

你只需要修改store提交方法，在发送接口请求前加必填校验逻辑即可，具体修改如下：

步骤1：调整store方法 #

在axios.post执行前新增校验逻辑，判断title和content是否为空，空值直接弹出提示终止提交：

store() {
  let self = this;
  // 新增校验逻辑开始
  // 去掉首尾空格后判断是否为空
  const title = self.note.title.trim()
  const content = self.note.content.trim()
  if (!title) {
    alert('请填写标题')
    return
  }
  if (!content) {
    alert('请填写内容')
    return
  }
  // 新增校验逻辑结束

  // 如果你实际是用下方CKEditor富文本作为内容，把上面的content替换成editorData即可，示例如下：
  // const content = self.editorData.trim()
  // 也可以加一行把富文本内容赋值给note的content字段，方便统一提交：
  // self.note.content = self.editorData

  axios.post(this.$apiAdress + '/api/notes?token=' + localStorage.getItem("api_token"),
    self.note
  )
    .then(function (response) {
      self.note = {
        title: '',
        content: '',
        applies_to_date: '',
        status_id: null,
        note_type: '',
      };
      // 提交成功后记得清空富文本内容（如果用了的话）
      // self.editorData = ''
      self.message = 'Successfully created note.';
      self.showAlert();
    }).catch(function (error) {
    if (error.response.data.message == 'The given data was invalid.') {
      self.message = '';
      for (let key in error.response.data.errors) {
        if (error.response.data.errors.hasOwnProperty(key)) {
          self.message += error.response.data.errors[key][0] + '  ';
        }
      }
      self.showAlert();
    } else {
      console.log(error);
      self.$router.push({path: 'login'});
    }
  });
},

可选优化 #

如果你不想用原生alert，也可以直接复用你已经封装好的CAlert组件做提示，只需要把alert('xxx')替换成给self.message赋值再调用self.showAlert()即可，样式会更统一。

内容的提问来源于stack exchange，提问作者tarafikttes