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)返回來的數(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)文章
這篇文章主要介紹了element?Drawer?抽屜無法渲染問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例
本文主要介紹了element動(dòng)態(tài)路由面包屑的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$promp
這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決
最近開發(fā)中遇到了些問題,跟大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+ElementPlus使用lang="ts"報(bào)Unexpected?token錯(cuò)誤的解決辦法,需要的朋友可以參考下2023-01-01
vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
關(guān)于vue3.0中的this.$router.replace({ path: ''/''})刷新無效果問題
這篇文章主要介紹了關(guān)于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法
這篇文章主要給大家介紹了Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法,文中有詳細(xì)的代碼示例供大家參考,如果有遇到相同問題的朋友可以參考閱讀本文,希望能夠幫到您2023-11-11
vue項(xiàng)目前端知識(shí)點(diǎn)整理【收藏】
本文是小編給大家收藏整理的關(guān)于vue項(xiàng)目前端知識(shí)點(diǎn)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
本篇文章主要介紹了Vue監(jiān)測(cè)數(shù)據(jù)的原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看2021-10-10
這篇文章主要介紹了vue引入cesium問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10