vue實現(xiàn)驗證用戶名是否可用
更新時間：2021年01月20日 11:22:58 作者：河軟小寶
這篇文章主要為大家詳細介紹了vue實現(xiàn)驗證用戶名是否可用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue驗證用戶名是否可用的具體代碼，供大家參考，具體內(nèi)容如下
驗證用戶名是否可用
案例效果
實現(xiàn)步驟(思路）
1、通過v-model實現(xiàn)數(shù)據(jù)綁定
2、需要提供提示信息
3、需要偵聽器監(jiān)聽輸入信息的變化
4、需要修改觸發(fā)的事件
進一步調(diào)整就是
1、采用偵聽器監(jiān)聽用戶名的變化
2、如果用戶名發(fā)生變化（調(diào)用后臺接口進行驗證）
3、根據(jù)驗證的結(jié)果調(diào)整提示信息
代碼
基本布局
<div id="app">
<span>用戶名:</span>
<span>
<input type="text" v-model.lazy="uname">
</span>
<span>
{{tip}}
</span>
</div>
通過監(jiān)聽器實現(xiàn)具體功能
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/* 偵聽器
采用偵聽器監(jiān)聽用戶名的變化
如果用戶名發(fā)生變化（調(diào)用后臺接口進行驗證）
根據(jù)驗證的結(jié)果調(diào)整提示信息 */
var vm = new Vue({
el: "#app",
data: {
uname: '',
tip: ''
},
methods: {
checkName: function (uname) {
// 調(diào)用接口，但是可以使用定時任務(wù)的方式模擬接口調(diào)用
var that = this;
setTimeout(function () {
// 模擬接口調(diào)用
if (uname == 'admin') {
that.tip = '用戶名已經(jīng)存在，請更換一個'
} else {
that.tip = '用戶名可以使用'
}
}, 1000)
}
},
watch: {
uname: function (val) {
// 調(diào)用后臺接口驗證用戶名的合法性
this.checkName(val);
this.tip = '正在驗證...'
}
},
});
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇文章里小編給大家分享了關(guān)于vue組件中使用路由的詳細步驟內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
vue3 element-plus如何使用icon圖標(biāo)組件
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue移動端實現(xiàn)調(diào)用相機掃描二維碼或條形碼的全過程
最近在使用vue開發(fā)的h5移動端想要實現(xiàn)一個調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于Vue移動端實現(xiàn)調(diào)用相機掃描二維碼或條形碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
vuex state中的數(shù)組變化監(jiān)聽實例
今天小編就為大家分享一篇vuex state中的數(shù)組變化監(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue下的@change事件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
element ui里dialog關(guān)閉后清除驗證條件方法
下面小編就為大家分享一篇element ui里dialog關(guān)閉后清除驗證條件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue3+elementplus基于el-table-v2封裝公用table組件詳細代碼
在日常開發(fā)后端管理系統(tǒng)項目中,用于展示數(shù)據(jù)多會用表格進行展示,下面這篇文章主要給大家介紹了關(guān)于vue3+elementplus基于el-table-v2封裝公用table組件的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue底部導(dǎo)航欄的詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue如何根據(jù)id在數(shù)組中取出數(shù)據(jù)
這篇文章主要介紹了Vue如何根據(jù)id在數(shù)組中取出數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)開關(guān)按鈕拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09