用vue 形成表单验证

可以使用 Vue.js 提供的 vee-validate 库来实现表单验证。首先需要安装 vee-validate：

npm install vee-validate --save

然后在 Vue 组件中引入 vee-validate：

import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

extend('required', required);
extend('email', email);

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    submit() {
      this.$refs.observer.validate().then(success => {
        if (success) {
          // 表单验证通过，可以提交表单数据
        }
      });
    },
  },
};

在模板中使用 ValidationProvider 组件来包裹需要验证的表单控件，使用 ValidationObserver 组件来包裹整个表单。例如：

<ValidationObserver ref="observer">
  <div>
    <label for="email">Email:</label>
    <ValidationProvider rules="required|email" v-slot="{ errors }">
      <input type="email" id="email" v-model="email">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
  <div>
    <label for="password">Password:</label>
    <ValidationProvider rules="required" v-slot="{ errors }">
      <input type="password" id="password" v-model="password">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
  <button @click="submit">Submit</button>
</ValidationObserver>

这样就可以实现基本的表单验证了。