vue实现表单验证功能

下面是关于“Vue实现表单验证功能”的完整攻略：

一、准备工作

在开始实现表单验证之前，我们需要先引入Vue和 Vue-Resource两个依赖库。在html文件中引入它们的CDN链接

<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Vue-Resource -->
<script src="https://cdn.jsdelivr.net/npm/vue-resource/dist/vue-resource.min.js"></script>

二、表单验证的实现

Step 1：定义数据模型

首先，我们需要定义一个数据模型来保存表单数据。

<div id="app">
  <form>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="请输入姓名" v-model="name">
    </div>
    <div class="form-group">
      <input type="tel" class="form-control" placeholder="请输入手机号码" v-model="phone">
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary" v-on:click.prevent="submit">提交</button>
    </div>
  </form>
</div>

new Vue({
  el: '#app',
  data: {
    name: '',
    phone: ''
  },
  methods: {
    submit: function() {
      // 表单提交操作
    }
  }
})

Step 2：添加验证规则

接下来，我们需要为表单中的每个输入框添加验证规则，用来确保用户输入的内容符合预期。

<div id="app">
  <form>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="请输入姓名" v-model="name" v-validate="'required'">
      <div class="error-msg" v-if="errors.has('name')">{{ errors.first('name') }}</div>
    </div>
    <div class="form-group">
      <input type="tel" class="form-control" placeholder="请输入手机号码" v-model="phone" v-validate="'required|phone'">
      <div class="error-msg" v-if="errors.has('phone')">{{ errors.first('phone') }}</div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary" v-on:click.prevent="submit">提交</button>
    </div>
  </form>
</div>

Vue.use(VeeValidate);

new Vue({
  el: '#app',
  data: {
    name: '',
    phone: ''
  },
  methods: {
    submit: function() {
      // 表单提交操作
    }
  }
})

需要注意的是，在这里我们使用了Vue.js的VeeValidate插件来实现表单验证功能。使用这个插件，我们可以轻松地为输入框添加验证规则，同时在验证不通过时，VeeValidate也会自动地显示相应的错误提示。

Step 3：表单提交

最后，我们需要实现表单的提交。在这里我们可以使用VueResource来发送表单数据到后台进行处理。

<div id="app">
  <form>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="请输入姓名" v-model="name" v-validate="'required'">
      <div class="error-msg" v-if="errors.has('name')">{{ errors.first('name') }}</div>
    </div>
    <div class="form-group">
      <input type="tel" class="form-control" placeholder="请输入手机号码" v-model="phone" v-validate="'required|phone'">
      <div class="error-msg" v-if="errors.has('phone')">{{ errors.first('phone') }}</div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary" v-on:click.prevent="submit">提交</button>
    </div>
  </form>
</div>

Vue.use(VeeValidate);

new Vue({
  el: '#app',
  data: {
    name: '',
    phone: ''
  },
  methods: {
    submit: function() {
      this.$http.post('/api/submit', {
        name: this.name,
        phone: this.phone
      }).then(response => {
        // 处理表单提交后的逻辑
      }, error => {
        // 处理表单提交失败后的逻辑
      });
    }
  }
})

需要注意的是，在这里我们使用了VueResource的POST方法，将表单数据发送到后台的/api/submit接口。在表单提交成功后，可以在response对象中获取到后台返回的数据，如果提交失败则可以在error对象中获取到错误信息。

三、示例说明

1. 简单的表单验证示例

<div id="app">
  <form>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="请输入姓名" v-model="name" v-validate="'required'">
      <div class="error-msg" v-if="errors.has('name')">{{ errors.first('name') }}</div>
    </div>
    <div class="form-group">
      <input type="tel" class="form-control" placeholder="请输入手机号码" v-model="phone" v-validate="'required|phone'">
      <div class="error-msg" v-if="errors.has('phone')">{{ errors.first('phone') }}</div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary" v-on:click.prevent="submit">提交</button>
    </div>
  </form>
</div>

<script>
Vue.use(VeeValidate);

new Vue({
  el: '#app',
  data: {
    name: '',
    phone: ''
  },
  methods: {
    submit: function() {
      console.log('submit form');
    }
  }
})
</script>

在这个示例中，我们使用了VeeValidate插件的required和phone规则来对输入框进行验证。其中，required规则用来确保输入框不为空，phone规则用来验证输入框中的内容是否为一个合法的手机号码。

1. 带自定条件验证规则的表单验证示例

<div id="app">
  <form>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="请输入姓名" v-model="name" v-validate="'required|min:2|max:10'">
      <div class="error-msg" v-if="errors.has('name')">{{ errors.first('name') }}</div>
    </div>
    <div class="form-group">
      <input type="password" class="form-control" placeholder="请输入密码" v-model="password" v-validate="'required|strong_password'">
      <div class="error-msg" v-if="errors.has('password')">{{ errors.first('password') }}</div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary" v-on:click.prevent="submit">提交</button>
    </div>
  </form>
</div>

<script>
Vue.use(VeeValidate);

new Vue({
  el: '#app',
  data: {
    name: '',
    password: ''
  },
  methods: {
    submit: function() {
      console.log('submit form');
    }
  },
  validators: {
    strong_password: function(value) { // 自定义验证规则：强密码（6-20个字符，包含字母、数字、标点符号）
      let strongPasswordRegex = /^[\w~!@#$%^&*()_+`\-={}[\]\\|:;'<>,.?/]{6,20}$/;
      return strongPasswordRegex.test(value);
    }
  }
})
</script>

在这个示例中，我们使用了VeeValidate的自定义验证规则功能，来实现一个“strong_password”规则。这个规则用来验证输入框中的内容是否为一个强密码，其定义是：由6-20个字符组成，包含字母、数字、标点符号。