Vue之验证用户名是否可用

Posted jiguiyan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue之验证用户名是否可用相关的知识,希望对你有一定的参考价值。

   需求:

表单输入框中输入用户名,失去焦点时验证用户名是否存在,如果已经存在,提示重新输入,如果不存在提示用户名可以使用。

实现分析:

  • 通过v-model实现数据的绑定
  • 需要提供提示信息
  • 需要侦听器监听输入信息的变化
  • 需要修改触发事件

实现验证用户名是否可用的效果:

 

技术图片

 

 

 

 

实现代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>验证用户名是否可用</title>
 8 </head>
 9 <script src="./js/vue.js"></script>
10 
11 <body>
12     <div id="app">
13         用户名:<input type="text" v-model.lazy=uname>
14         <span>{{tip}}</span>
15     </div>
16     <script>
17        
18         var vm = new Vue({
19             el: #app,
20             data: {
21                 uname: ‘‘,
22                 tip: ‘‘
23             },
24             methods: {
25                 checkName: function(uname) {
26                     var that = this;
27                     //调用接口,但是可以使用定时任务的方式模拟接口的调用
28                     setTimeout(function() {
29                         //模拟接口调用
30                         if (uname == admin) {
31                             that.tip = 用户名已存在,请重新输入
32                         } else {
33                             that.tip = 恭喜你输入的用户名可以使用
34                         }
35 
36                     }, 2000)
37                 }
38             },
39             watch: {
40                 uname: function(val) {
41                     //调用后台接口验证用户名的合法性
42                     this.checkName(val);
43                     //修改提示信息
44                     this.tip = 正在验证用户名...
45                 }
46             }
47 
48         })
49     </script>
50 
51 </body>
52 
53 </html>

侦听器实现的步骤:


1、使用侦听器监听用户名的变化
2、调用后台接口进行验证
3、使用验证的结果调整提示信息


技术图片

 

 

技术图片

 

以上是关于Vue之验证用户名是否可用的主要内容,如果未能解决你的问题,请参考以下文章

Vue 验证用户名是否可用

Vue 验证用户名是否可用

Vue 验证用户名是否可用

基于maven+ssm的增删改查之关于ajax验证用户是否存在存在的问题

vscode之快速生成vue模板

VSCode自定义代码片段1——vue主模板