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 部分
 // v-model和v-verify必填

// 当验证不通过就在这里显示
保存
// 提交的时候触发 // 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 } }

你可能感兴趣的:(vue 表单验证插件 vue-verify-plugin)