Vue快速实现通用表单验证功能

<div>
  <h2>你好，请登录</h2>
  <div>
    <form id="loginFrom">
      <div>
        <label>邮箱</label>
        <input type="text" class="form-control" id="inputEmail3" placeholder="Email" v-model="email">
        </div>
      </div>
      <div>
        <label>密码</label>
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password" v-model="password">
      </div>
      <div>
        <button type="button" class="btn btn-default login" v-on:click="login()">登录</button>
      </div>
      <div v-if="errorList.length > 0">
        <div class="alert alert-danger" role="alert">{{errorList.join(';')}}</div>
      </div>
    </form>
  </div>
</div>
<script>
var vm = new Vue({
  el: '#loginFrom',
  data: {
    email: "",
    password: "",
    errorList: []
  },
  methods: {
    validate: function () {
      this.errorList = []
      if (this.email == '') {
        this.errorList.push('请输入邮箱');
      } else {
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        if (!reg.test(this.email)) {
          this.errorList.push('请输入有效的邮箱');
        }
      }
      if (this.password == '') {
        this.errorList.push('请输入密码');
      } else {
        if (this.password.length < 6) {
          this.errorList.push('密码长度不得少于6位');
        }
      }

      return this.errorList.length <= 0;
    },
    login: function () {
      if (this.validate()) {
        alert('登录成功');
      }
    }
  }
});
</script>

var vm = new Vue({
  el:'#loginFrom',
  data:{
    email:"",
    password:"",
    validators:{
      rules: {
        email: {
          required: true,
          email: true
        },
        password: {
          required: true,
          minlength: 6,
        }
      },
      messages:{
        email:{
          required:"请输入邮箱",
          email:"请输入有效的邮箱"
        },
        password:{
          required:"请输入密码",
          minlength:"密码长度不得少于6位"
        }
      }
    }
  },
  mounted:function(){
    $('#loginFrom').validate(this.validators);
  }
});

npm install vee-validate@2.0.0 --save
npm install vue-i18n

import VueI18n from 'vue-i18n';
import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'

//启用Vue国际化插件
Vue.use(VueI18n)

//配置VeeValidate
const i18n = new VueI18n({
  locale: 'zh_CN',
})

Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: 'validation',
  dictionary: {
    zh_CN
  }
});

<!-- template of LoginForm -->
<template>
 <div class="container">
  <h2 class="text-center">你好，请登录</h2>
  <div class="row">
   <form class="form-horizontal col-md-offset-4 col-md-4" id="loginFrom">
    <div class="form-group">
     <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
     <div class="col-sm-10">
      <input type="text" class="form-control" id="email" name="email" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="邮箱"/>
      <p class="alert alert-danger" role="alert" v-show="errors.has('email')">{{ errors.first('email') }}</p>
     </div>
    </div>
    <div class="form-group" name="password" rules="required">
     <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
     <div class="col-sm-10">
      <input type="password" class="form-control" id="password" name="password" placeholder="Password" v-model="password" v-validate="'required|min:6'" data-vv-as="密码"/>
      <p class="alert alert-danger" role="alert" v-show="errors.has('password')">{{ errors.first('password') }}</p>
     </div>
    </div>
    <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
       <label>
        <input type="checkbox" />记住密码
       </label>
      </div>
     </div>
    </div>
    <div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn btn-default login" v-on:click="login()">登录</button>
     </div>
    </div>
   </form>
  </div>
 </div>
</template>
<!-- script of LoginForm -->
<script>
export default {
 name: "LoginForm",
 components: {},
 data: () => ({
  email: "",
  password: ""
 }),
 methods: {
  login: function() {

  }
 }
};
</script>
<!-- style of LoginForm -->
<style scoped>
.login {
 color: white;
 height: 38px;
 width: 300px;
 background-color: #2b669a;
}
</style>

<input type="text" class="form-control" id="email" name="email" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="邮箱"/>
<p class="alert alert-danger" role="alert" v-show="errors.has('email')">{{ errors.first('email') }}</p>

Validator.extend('isMobile', {
 messages: {
  zh_CN: field => field + '必须是11位手机号码'
 },
 validate: value => {
  return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
 }
})