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