Vue驗(yàn)證用戶名是否可用的方法
更新時(shí)間：2021年09月07日 10:51:06 作者：拿紅羅卜釣魚
這篇文章主要為大家詳細(xì)介紹了Vue驗(yàn)證用戶名是否可用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue驗(yàn)證用戶名是否可用的具體代碼，供大家參考，具體內(nèi)容如下
當(dāng)在輸入框中輸入姓名，失去焦點(diǎn)時(shí)驗(yàn)證是否存在，如果已經(jīng)存在，提示重新輸入，如果不存在，提示可以使用。
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>偵聽器 案例</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="msg"> <span> {{ span1 }}</span>
</div>
<script>
// 偵聽器去偵聽當(dāng)前的數(shù)據(jù)變化，當(dāng)文本框中的數(shù)據(jù)失去焦點(diǎn)的時(shí)候，
// 把文本框中的值拿到后臺(tái)去操作，根據(jù)后臺(tái)返回來(lái)的數(shù)據(jù)進(jìn)行判斷，從而給出提示
var vm = new Vue({
el: "#app",
data: {
msg: "",
span1: "",
},
methods: {
show1: function (val) {//這個(gè)地方的val就是文本框中的值
// 執(zhí)行異步請(qǐng)求，去后臺(tái)拿數(shù)據(jù)，模擬去后臺(tái)拿數(shù)據(jù)
var that = this; //因?yàn)閟etTimeout里面也有this對(duì)象，this對(duì)象是document對(duì)象
setTimeout(function () { //這里面寫 val 了話他是不會(huì)進(jìn)if的
if (val === "aaa") {
that.span1 = "用戶名不可以使用，請(qǐng)換一個(gè)";
} else {
that.span1 = "用戶名可以使用";
}
}, 2000);
}
},
watch: {
msg: function (val) {
this.show1(val);
this.span1 = "正在驗(yàn)證中";
},
}
})
</script>
</body>
</html>
效果如下
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
VUE2—defineProperty和VUE3—proxy使用方式
Vue2和Vue3的響應(yīng)式原理不同,Vue2使用Object.defineProperty,Vue3使用Proxy,Object.defineProperty可以監(jiān)聽某個(gè)屬性,但不能監(jiān)聽整個(gè)對(duì)象,且無(wú)法監(jiān)聽對(duì)象屬性的新增和刪除,Proxy可以監(jiān)聽整個(gè)對(duì)象,且不會(huì)修改原數(shù)據(jù),可以監(jiān)聽數(shù)組的長(zhǎng)度變化2025-01-01
antd-日歷組件,前后禁止選擇,只能選中間一部分的實(shí)例
這篇文章主要介紹了antd-日歷組件,前后禁止選擇,只能選中間一部分的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue3?+?element-plus?的?upload?+?axios?+?django?實(shí)現(xiàn)文件上
這篇文章主要介紹了vue3?+?element-plus?的?upload?+?axios?+?django?文件上傳并保存,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-01-01
vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接（pages）
這篇文章主要介紹了vue項(xiàng)目打包上傳github并制作預(yù)覽鏈接（pages）的相關(guān)資料,需要的朋友可以參考下2019-04-04
vue在項(xiàng)目中實(shí)現(xiàn)base64加密解密的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue在項(xiàng)目中實(shí)現(xiàn)base64加密解密的兩種方法,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解一下2023-10-10
vue+element+Java實(shí)現(xiàn)批量刪除功能
這篇文章主要介紹了vue+element+Java實(shí)現(xiàn)批量刪除功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
Canvas是HTML5中新增的元素,專門用來(lái)繪制圖形,下面這篇文章主要給大家介紹了關(guān)于Vue使用Canvas生成隨機(jī)大小且不重疊圓的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題
這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08
Vue動(dòng)態(tài)組件實(shí)現(xiàn)異常處理方法
Vue3動(dòng)態(tài)組件怎么進(jìn)行異常處理？下面本篇文章帶大家聊聊Vue3 動(dòng)態(tài)組件異常處理的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
vue中的虛擬dom知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue中的虛擬dom知識(shí)點(diǎn)總結(jié)，文章圍繞主題內(nèi)容展開詳細(xì)介紹，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04