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