vue 表单验证插件 vue-verify-plugin

1.npm下载

npm install vue-verify-plugin --save

2.main.js里面引入(很多组件需要用到，直接全局引用)

// 引入表单验证
import verify from "vue-verify-plugin";

Vue.use(verify, {
  blur: true // 失焦是否触发
})

3.在需要的组建里

// 在 template 部分
<input type="text" placeholder="请输入昵称" v-model="name" v-verify="name"> // v-model和v-verify必填
<p v-remind="name"></p> // 当验证不通过就在这里显示
<div class="submit" @click="submitName">保存</div>  // 提交的时候触发


// js 部分
data () {
  return {
      name: "", // 昵称
   }
}

// 验证插件
verify: {
  name: ["required" , { // required 必填
     // 自定义验证
    test: function(val) {
      let nameIndex = this.testData.indexOf(val);
      if (nameIndex !== -1) {
        return false;
      }
     return true;
    },
    // false 显示 message
    message: '此昵称重复，请修改！'
  }]
},
verify: {
  name: ["required" , "emial"] // 官方提供的邮箱验证
}
// 提交姓名
submitName: function() {
  console.log(this.$verify.check()); // 群不通过为true
  if (this.$verify.check()) {
    this.replacePhone = false;
    console.log("我成功了");
    // 可以执行ajax
  }
}