本文實例為大家分享了vue驗證用戶名是否可用的具體代碼，供大家參考，具體內容如下
驗證用戶名是否可用
案例效果
實現步驟(思路）
1、通過v-model實現數據綁定
2、需要提供提示信息
3、需要偵聽器監聽輸入信息的變化
4、需要修改觸發的事件
進一步調整就是
1、采用偵聽器監聽用戶名的變化
2、如果用戶名發生變化（調用后臺接口進行驗證）
3、根據驗證的結果調整提示信息
代碼
基本布局
|
1
2
3
4
5
6
7
8
9
|
<div id="app"> <span>用戶名:</span> <span> <input type="text" v-model.lazy="uname"> </span> <span> {{tip}} </span></div> |
通過監聽器實現具體功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> /* 偵聽器 采用偵聽器監聽用戶名的變化 如果用戶名發生變化（調用后臺接口進行驗證） 根據驗證的結果調整提示信息 */ var vm = new Vue({ el: "#app", data: { uname: '', tip: '' }, methods: { checkName: function (uname) { // 調用接口，但是可以使用定時任務的方式模擬接口調用 var that = this; setTimeout(function () { // 模擬接口調用 if (uname == 'admin') { that.tip = '用戶名已經存在，請更換一個' } else { that.tip = '用戶名可以使用' } }, 1000) } }, watch: { uname: function (val) { // 調用后臺接口驗證用戶名的合法性 this.checkName(val); this.tip = '正在驗證...' } }, });</script> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_50001396/article/details/112798521
