vue表格的正则校验写在哪

Vue 表格的正则校验可以写在以下位置：

1. 组件中的 `methods` 方法中，例如：

<template>
  <div>
    <input v-model="text" @blur="checkText" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ""
    };
  },
  methods: {
    checkText() {
      const reg = /^\d+$/;
      if (!reg.test(this.text)) {
        alert("请输入数字！");
      }
    }
  }
};
</script>

2. 使用第三方组件库的校验规则，例如 ElementUI 中的表单校验规则：

<template>
  <el-form :model="form" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_-]{4,16}$/,
            message: "用户名必须是4-16位字母数字或下划线",
            trigger: "blur"
          }
        ]
      }
    };
  }
};
</script>