Vue v2如何实现表单输入值空值校验？现有代码校验不生效求解决

问题根因 #

你的表单校验不生效的核心原因是addItem方法的判断逻辑校验对象错误：

• 当前你判断的是this.items != 0，也就是校验任务列表数组是否为空，完全没有对用户输入的任务标题（绑定的title变量）做校验，所以哪怕输入为空也会直接执行新增逻辑。
• 另外你的代码存在语法缺失：addItem方法没有写闭合的}，整个Vue实例也缺少收尾的闭合符号，运行时会报错。

修复方案 #

替换你原来的addItem方法逻辑即可，修复后的代码如下：

methods: {
  addItem() {
    // 先去除输入内容前后空格，判断是否为空，避免用户只输入空格的无效提交
    if(this.title.trim()) {
      this.items.push({
        title: this.title,
        completed: false
      })
      this.title = "";
    } else {
      alert("Please enter a task.")
    }
  }
}

如果需要更友好的校验体验，可以不用alert弹窗，改为页面内提示：

• 在data中新增errorMsg: ''变量
• 在表单代码下新增提示标签：<p style="color:red" v-show="errorMsg">{{errorMsg}}</p>
• 把alert逻辑替换为this.errorMsg = '请输入任务内容'，输入合法时先把errorMsg清空即可。

另外如果不需要初始的空任务，可以把data中items的初始值改为空数组items: []。

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