vue 对填写表单时数据进行验证错误信息进行提示

Vue 提供了一些内置的表单验证指令和属性，如 v-model、 :value、 v-bind、 v-if、 v-show、 v-on、 v-validate 等等。

以下是一些常见的表单验证错误信息提示方法：

在表单控件的 HTML 标签中添加 v-model 或 :value 属性，并在其后添加 v-if 或 v-show 指令，用于根据表单控件的值判断是否显示错误信息提示框。例如：

<input type="text" v-model="username">
<div v-if="!username">请输入用户名！</div>

使用 v-bind:class 指令为表单控件添加动态类，根据验证结果动态改变类名并显示不同的样式。例如：

<input type="password" v-model="password" :class="{error: !isValidPassword}">
<div class="error-message" v-if="!isValidPassword">密码必须包含数字、字母和特殊字符，长度在6-16个字符之间！</div>

使用 v-validate 插件进行表单验证，并使用 $errors 对象获取表单验证错误信息，并在模板中使用 v-if 或 v-show 显示错误信息。例如：

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <label>用户名：</label>
        <input type="text" name="username" v-validate="'required'" />
        <div v-if="$errors.has('username')">{{ $errors.first('username') }}</div>
      </div>
      <div>
        <label>密码：</label>
        <input type="password" name="password" v-validate="'required|min:6|max:16|regex:/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/'" />
        <div v-if="$errors.has('password')">{{ $errors.first('password') }}</div>
      </div>
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import { required, min, max, regex } from 'vee-validate/dist/rules';

extend('regex', regex);

export default {
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  methods: {
    submitForm() {
      this.$refs.observer.validate().then((result) => {
        if (result) {
          // 表单验证通过，提交表单数据
        }
      });
    },
  },
};
</script>
``