案例：验证用户名是否可用
生活随笔
收集整理的這篇文章主要介紹了
案例：验证用户名是否可用
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
案例：驗證用戶名是否可用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div><span>用戶名：</span><span><input type="text" v-model.lazy='uname'></span><span>{{tip}}</span></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/* 偵聽器1、采用偵聽器監(jiān)聽用戶名的變化2、調用后臺接口進行驗證3、根據(jù)驗證的結果調整提示信息*/var vm = new Vue({el: '#app',data: {uname: '',tip: ''},methods: {checkName: function(uname) {// 調用接口，但是可以使用定時任務的方式模擬接口調用var that = this;setTimeout(function(){// 模擬接口調用if(uname == 'admin') {that.tip = '用戶名已經(jīng)存在，請更換一個';}else{that.tip = '用戶名可以使用';}}, 2000);}},watch: {uname: function(val){// 調用后臺接口驗證用戶名的合法性this.checkName(val);// 修改提示信息this.tip = '正在驗證...';}}});</script> </body> </html>
總結
以上是生活随笔為你收集整理的案例：验证用户名是否可用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算属性|| 计算属性与方法的区别：计算
- 下一篇： Spring Boot与Docker||