vue實(shí)現(xiàn)驗(yàn)證用戶(hù)名是否可用
本文實(shí)例為大家分享了vue驗(yàn)證用戶(hù)名是否可用的具體代碼，供大家參考，具體內(nèi)容如下
驗(yàn)證用戶(hù)名是否可用
案例效果
實(shí)現(xiàn)步驟(思路）
1、通過(guò)v-model實(shí)現(xiàn)數(shù)據(jù)綁定
2、需要提供提示信息
3、需要偵聽(tīng)器監(jiān)聽(tīng)輸入信息的變化
4、需要修改觸發(fā)的事件
進(jìn)一步調(diào)整就是
1、采用偵聽(tīng)器監(jiān)聽(tīng)用戶(hù)名的變化
2、如果用戶(hù)名發(fā)生變化（調(diào)用后臺(tái)接口進(jìn)行驗(yàn)證）
3、根據(jù)驗(yàn)證的結(jié)果調(diào)整提示信息
代碼
基本布局
<div id="app">
<span>用戶(hù)名:</span>
<span>
<input type="text" v-model.lazy="uname">
</span>
<span>
{{tip}}
</span>
</div>
通過(guò)監(jiān)聽(tīng)器實(shí)現(xiàn)具體功能
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/* 偵聽(tīng)器
采用偵聽(tīng)器監(jiān)聽(tīng)用戶(hù)名的變化
如果用戶(hù)名發(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 = '用戶(hù)名已經(jīng)存在，請(qǐng)更換一個(gè)'
} else {
that.tip = '用戶(hù)名可以使用'
}
}, 1000)
}
},
watch: {
uname: function (val) {
// 調(diào)用后臺(tái)接口驗(yàn)證用戶(hù)名的合法性
this.checkName(val);
this.tip = '正在驗(yàn)證...'
}
},
});
</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中動(dòng)態(tài)select的使用方法示例
這篇文章主要介紹了vue中動(dòng)態(tài)select的使用方法,結(jié)合實(shí)例形式分析了vue.js使用動(dòng)態(tài)select創(chuàng)建下拉菜單相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
詳解element-ui日期時(shí)間選擇器的日期格式化問(wèn)題
這篇文章主要介紹了詳解element-ui日期時(shí)間選擇器的日期格式化問(wèn)題，本文用到了DateTimePicker來(lái)選擇日期時(shí)間，但是在將數(shù)據(jù)傳回后臺(tái)的過(guò)程中遇到了一些令人頭疼的問(wèn)題，有興趣的一起來(lái)了解一下2019-04-04
vue使用Element的Tree樹(shù)形控件實(shí)現(xiàn)拖動(dòng)改變節(jié)點(diǎn)順序方式
這篇文章主要介紹了vue使用Element的Tree樹(shù)形控件實(shí)現(xiàn)拖動(dòng)改變節(jié)點(diǎn)順序方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3點(diǎn)擊出現(xiàn)彈窗后背景變暗且不可操作的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
路由的hash和history模式的區(qū)別及說(shuō)明
Vue-Router提供了hash模式和history模式兩種路由模式,hash模式URL帶#,支持低版本IE,history模式URL不帶#,需要服務(wù)器支持2025-01-01
這篇文章主要介紹了利用report分析vue項(xiàng)目中各文件大小問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue3初始化如何調(diào)用函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue實(shí)現(xiàn)文字上下滾動(dòng)動(dòng)畫(huà)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)超酷文字上下滾動(dòng)動(dòng)畫(huà),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-03-03
Vue實(shí)現(xiàn)監(jiān)聽(tīng)dom節(jié)點(diǎn)寬高變化方式
這篇文章主要介紹了Vue實(shí)現(xiàn)監(jiān)聽(tīng)dom節(jié)點(diǎn)寬高變化方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
功能強(qiáng)大的vue.js拖拽組件安裝應(yīng)用
這篇文章主要為大家介紹了功能強(qiáng)大的vue.js拖拽組件安裝應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06