vue 对填写表单时数据进行验证错误信息进行提示不使用第三方库

在Vue中，可以使用v-model指令绑定表单元素的值，然后使用计算属性或watch监听绑定的值的变化，进行数据验证。如果数据验证失败，可以使用v-bind绑定错误提示信息，并在页面中显示。

下面是一个示例代码：

<template>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name">
    <span v-bind:class="{ 'error-message': !isValidName }">
      {{ nameError }}
    </span>
    
    <label for="email">Email:</label>
    <input type="email" id="email" v-model="email">
    <span v-bind:class="{ 'error-message': !isValidEmail }">
      {{ emailError }}
    </span>
    
    <button v-on:click="submit">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: '',
      nameError: '',
      emailError: '',
    };
  },
  computed: {
    isValidName() {
      // 验证名字
      const nameRegex = /^[a-zA-Z]+$/;
      if (!nameRegex.test(this.name)) {
        this.nameError = 'Name is invalid';
        return false;
      } else {
        this.nameError = '';
        return true;
      }
    },
    isValidEmail() {
      // 验证邮箱
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.email)) {
        this.emailError = 'Email is invalid';
        return false;
      } else {
        this.emailError = '';
        return true;
      }
    },
  },
  methods: {
    submit() {
      if (this.isValidName && this.isValidEmail) {
        // 验证通过，可以提交表单
      }
    },
  },
};
</script>

<style>
.error-message {
  color: red;
}
</style>

在上面的示例中，我们使用v-model指令绑定了name和email两个表单元素的值。然后使用computed属性isValidName和isValidEmail分别验证名字和邮箱的格式是否正确。如果验证失败，就在对应的错误提示信息中绑定错误信息，并添加一个error-message的class，用于设置样式。最后，在submit方法中检查isValidName和isValidEmail是否都为true，如果是就可以提交表单。

这只是一个简单的示例，实际上可以根据需求进行更复杂的数据验证和错误提示处理