前言

非空校验很简单啦，主要是有一次请教导师其他问题时，他看到我的非空校验，眉头一皱（这里脑补导师的面部表情），说：怎么这样写？我连忙“狡辩”：不不不，这前面是上一个人写的，这后面一个是我补的。当然事实也是如此，我可不敢乱改他人的代码，跟着写就是了，嘿嘿。谁知导师一言不发地改了我的代码......我一看，果然牛啊！又学到了。

一、普通的非空校验

<template>
  <div>
    <el-form ref="form" :model="searchKeys" label-width="80px">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="searchKeys.username" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="searchKeys.age" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="telephoneNumber">
        <el-input v-model="searchKeys.number" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="searchKeys.address" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchKeys: {
        username: "",
        age: "",
        number: "",
        address: "",
      },
    };
  },
  methods: {
    submit() {
      if (!this.searchKeys.username) {
        return this.$message.error("姓名不能为空！");
      }
      if (!this.searchKeys.age) {
        return this.$message.error("年龄不能为空！");
      }
      if (!this.searchKeys.number) {
        return this.$message.error("手机号码不能为空！");
      }
      if (!this.searchKeys.address) {
        return this.$message.error("地址不能为空！");
      }
    },
  },
};
</script>

二、优雅的非空校验

<template>
  <div>
    <el-form ref="form" :model="searchKeys" label-width="80px">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="searchKeys.username" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="searchKeys.age" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="telephoneNumber">
        <el-input v-model="searchKeys.number" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="searchKeys.address" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchKeys: {
        username: "",
        age: "",
        number: "",
        address: "",
      },
    };
  },
  methods: {
    submit() {
    // 知道这里为啥把顺序颠倒了吗？哈哈试一试就知道啦
      const objMessage = {
        address: "地址不能为空！",
        number: "手机号码不能为空！",
        age: "年龄不能为空！",
        username: "姓名不能为空！",
      };
      let errMessage = "";
      Object.keys(objMessage).forEach((key) => {
        if (!this.searchKeys[key]) {
          errMessage = objMessage[key];
        }
      });
      errMessage && this.$message.error(errMessage);
    },
  },
};
</script>

后语

不由感慨，其实很多问题可以更优雅的解决。也不难，只是没想到还可以这么干。向导师致敬。