溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue怎么實(shí)現(xiàn)驗(yàn)證用戶名是否可用的功能

發(fā)布時(shí)間：2021-09-07 13:53:01 來(lái)源：億速云 閱讀：159 作者：chen 欄目：開發(fā)技術(shù)

這篇文章主要介紹“Vue怎么實(shí)現(xiàn)驗(yàn)證用戶名是否可用的功能”，在日常操作中，相信很多人在Vue怎么實(shí)現(xiàn)驗(yàn)證用戶名是否可用的功能問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue怎么實(shí)現(xiàn)驗(yàn)證用戶名是否可用的功能”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

當(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>

效果如下

Vue怎么實(shí)現(xiàn)驗(yàn)證用戶名是否可用的功能

到此，關(guān)于“Vue怎么實(shí)現(xiàn)驗(yàn)證用戶名是否可用的功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手