前端查询前校验该输入的字段是否能够进行查询

一、使用数组与循环的组合

<template>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item :label="t('lables.name')">
      <el-input
        v-model="form.name"
        placeholder="请输入字段名称"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">{{
        t('action.query')
      }}</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" :label="t('lables.name')" />
    ...
  </el-table>


</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
} from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ElMessage} from 'element-plus';
import { queryList } from '@/services/list';



export default defineComponent({
  name: 'List',
  components: {},
  setup() {
    const { t } = useI18n();
    const router = useRouter();

    const form = reactive({
      name: '',
    });

    const tableData = ref<any[]>([]);

    function query() {
      const params = {
        name: form.name,
      };
      // 创建一个包含需要检查的关键字的数组
      const keywords = [
       '测试','用户','年龄','性别','姓名'
      ];

      // 检查 params.shortName 是否包含关键字数组中的任何一个关键字
      for (const keyword of keywords) {
        if (params.shortName.includes(keyword)) {
          // 如果包含，则弹出 elmessage
          return ElMessage({
            type: 'error',
            message: '暂不支持该字段查询，请输入正确的字段',
          });
        }
      }
      // 如果没有包含任何关键字，则请求后端接口 这里的queryList是接口
      queryList(params).then((res) => {
        tableData.value = res;
      });
    }


    return {
      form,
      t,
      query,
      tableData,
    };
  },
});
</script>

二、正则与正则方法的结合

<template>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item :label="t('lables.name')">
      <el-input
        v-model="form.name"
        placeholder="请输入字段名称"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">{{
        t('action.query')
      }}</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" :label="t('lables.name')" />
    ...
  </el-table>


</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  ref,
} from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { ElMessage} from 'element-plus';
import { queryList } from '@/services/list';



export default defineComponent({
  name: 'List',
  components: {},
  setup() {
    const { t } = useI18n();
    const router = useRouter();

    const form = reactive({
      name: '',
    });

    const tableData = ref<any[]>([]);
    
    function query() {
      const params = {
        name: form.name,
      };

      // 创建一个正则表达式，使用 | 来匹配任意一个关键字
      const pattern =
        /公司|国际|网络|科技|贸易/;

      // 使用 test 方法检查 params.name是否匹配正则表达式
      if (pattern.test(params.name)) {
        // 如果匹配，则弹出 elmessage
        return ElMessage({
          type: 'error',
          message: '暂不支持该输入查询，请输入正确的公司简称',
        });
      }
      // 如果没有匹配，则请求接口
      queryList (params).then((res) => {
        tableData.value = res;
      });
    }

    return {
      form,
      t,
      query,
      tableData,
    };
  },
});
</script>