Vue implements verification 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

Verify that the username is available

Case Effect

Implementation steps (ideas)

1. Data binding through v-model
2. Prompt information is required
3. A listener is needed to monitor changes in input information
4. Events that need to be modified

Further adjustments are

1. Use a listener to monitor changes in user names
2. If the user name changes (call the backend interface for verification)
3. Adjust the prompt information according to the verification results

Code

Basic layout

<div id="app">
  <span>Username:</span>
  <span>
   <input type="text" v-model.lazy="uname">
  </span>
  <span>
   {{tip}}
  </span>
</div>

Implement specific functions through listeners

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
  /* Listener uses the listener to monitor changes in the user name. If the user name changes (call the background interface for verification)
  Adjust the prompt information according to the verification results*/
  var vm = new Vue({
   el: "#app",
   data: {
    uname: '',
    tip: ''
   },
   methods: {
    checkName: function (uname) {
     //Call the interface, but you can use the scheduled task to simulate the interface call var that = this;
     setTimeout(function () {
      // Simulate interface call if (uname == 'admin') {
       that.tip = 'The user name already exists, please change it'
      } else {
       that.tip = 'Username can be used'
      }
     }, 1000)
    }
   },
   watch:
    uname: function (val) {
     //Call the backend interface to verify the legitimacy of the user name this.checkName(val);
     this.tip = 'Verifying...'
    }
   },

  });
</script>

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:

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
Vue method to verify whether the username is available

<<: Steps to install MySQL 5.7.10 on Windows server 2008 r2

>>: Detailed explanation of crontab scheduled execution command under Linux