Vue method to verify whether the username is available

This article example shares the specific code of Vue to verify whether the username is available for your reference. The specific content is as follows

When entering a name in the input box, verify whether it exists when losing focus. If it already exists, prompt to re-enter it. If it does not exist, prompt that it can be used.

The code is as follows

<!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>Listener Example</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>
        // The listener listens to the current data changes. When the data in the text box loses focus,
        // Take the value in the text box to the backend for operation, make a judgment based on the data returned by the backend, and give a prompt var vm = new Vue({
            el: "#app",
            data: {
                msg: "",
                span1: "",
            },
            methods: {
                show1: function (val) {//The val here is the value in the text box//Execute asynchronous request, go to the background to get data, simulate going to the background to get data var that = this; //Because there is also a this object in setTimeout, this object is the document object setTimeout(function () { //If val is written here, it will not enter the if if (val === "aaa") {
                            that.span1 = "The user name is not available, please change it";
                        } else {
                            that.span1 = "Username can be used";
                        }
                    }, 2000);
                }
            },
            watch:
                msg: function (val) {
                    this.show1(val);
                    this.span1 = "Verifying";
                },
            }
        })
    </script>
</body>
</html>

The effect is as follows

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue implements verification whether the username is available
Go+Vue development process of an online food delivery application (username password and graphic verification code)
Vue+element-ui integrates random verification code + username + password form verification function

<<: mysql trigger creation and usage examples

>>: Vue simulates the shopping cart settlement function