vue2表单校验demo

以下是一个使用vue2进行表单校验的示例程序，希望对您有所帮助：

template：

<div id="app">
  <h4>表单校验示例</h4>
  <form @submit.prevent="submit">
    <div class="form-group">
      <label for="name">姓名：</label>
      <input id="name" type="text" v-model="name" :class="{ 'is-invalid': errors.name }">
      <div v-if="errors.name" class="invalid-feedback">{{ errors.name }}</div>
    </div>
    <div class="form-group">
      <label for="email">邮箱：</label>
      <input id="email" type="email" v-model="email" :class="{ 'is-invalid': errors.email }">
      <div v-if="errors.email" class="invalid-feedback">{{ errors.email }}</div>
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input id="password" type="password" v-model="password" :class="{ 'is-invalid': errors.password }">
      <div v-if="errors.password" class="invalid-feedback">{{ errors.password }}</div>
    </div>
    <button type="submit">提交</button>
  </form>
</div>

script：

new Vue({
  el: '#app',
  data() {
    return {
      name: '',
      email: '',
      password: '',
      errors: {}
    }
  },
  methods: {
    submit() {
      this.errors = {};
      if (!this.name) {
        this.errors.name = '姓名不能为空';
      }
      if (!this.email) {
        this.errors.email = '邮箱不能为空';
      } else if (!/\S+@\S+\.\S+/.test(this.email)) {
        this.errors.email = '邮箱格式不正确';
      }
      if (!this.password) {
        this.errors.password = '密码不能为空';
      } else if (this.password.length < 6) {
        this.errors.password = '密码长度不足';
      }

      if (Object.keys(this.errors).length) {
        return;
      }

      alert('表单已提交。');
    }
  }
})

在上面的示例中，我们首先定义了一个表单，其中包含姓名、邮箱和密码三个字段。每个字段前面有一个标签和一个输入框，用于输入相应的内容。每个输入框都有一个绑定到Vue实例数据的v-model属性。

表单的submit事件通过@submit.prevent指定了一个被调用的方法submit。在该方法中，我们首先初始化errors对象为空，并逐个检查姓名、邮箱和密码三个字段。

如果某个字段为空，则在errors对象中记录一个错误消息。如果邮箱格式不正确，则使用相应的错误消息记录错误。如果密码长度不足，也会记录一个错误。最后，如果errors对象中有任何错误，则不会提交表单。如果没有错误，则弹出一个成功消息。

以上就是Vue2表单校验的示例程序。