使用VueJS和Laravel对用户的输入进行实时验证

原文链接: https://itnext.io/vuejs-and-laravel-realtime-unique-input-validation-a6d9220be1c5

我经常面临的一个问题是需要对用户的输入做唯一性得实时验证。最常见的场景是当你在注册时验证用户名,用户必须不断尝试提交表单来验证输入的用户名是否可用使用。这是由于验证在服务端进行并展示结果给用户。

在我的项目中使用了Vuetify和VeeValidate,我将用它来解决我的问题。下面讨论的这些概念或方法,也可以使用其他的组件实现,但是也许需要一些修改调整。

我将使用一个从我的一系列多用户的网站应用(multi-tenant web applications)中提炼出一个DEMO项目。下面是演示项目的地址以及系列文章的第一部分:

laravel-tenancy-passport-demo
Laravel Passport and Hyn\Tenancy — Part 1

好戏开始!

在这个项目中,每一个注册用户都有自己唯一的子域名及其控制面板。域名是在注册时选择并且是唯一的,所以需要在用户填写域名的时候就立即告诉他是否可用,这需要通过API在数据库中检查域名是否可用,如果存在则返回false,反之true。

正如所上所说,这里使用VeeValidate进行验证,文档: https://baianat.github.io/vee-validate/

Vuetify 是一个非常棒的UI框架,它会大大提高开发效率。文档:https://vuetifyjs.com/en/getting-started/quick-start

VeeValidate 配置

使用极其简单,只需要引入并添加需要的配置即可。下面是我的app.js配置示例:

//Imports import Vue from 'vue' import VueRouter from 'vue-router' import Vuetify from 'vuetify' import VeeValidate from 'vee-validate' import App from '@/App' import routes from '@/routes.js' //Load Plugins Vue.use(VueRouter) Vue.use(Vuetify) Vue.use(VeeValidate, { inject: false }) //Router configuration const router = new VueRouter({ mode: 'history', routes }) export const vm = new Vue({ el: '#app', render: h => h(App), router }); Read More