利用vue怎么對(duì)用戶名進(jìn)行驗(yàn)證

利用vue怎么對(duì)用戶名進(jìn)行驗(yàn)證？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

實(shí)現(xiàn)步驟(思路）

1、通過v-model實(shí)現(xiàn)數(shù)據(jù)綁定
2、需要提供提示信息
3、需要偵聽器監(jiān)聽輸入信息的變化
4、需要修改觸發(fā)的事件

進(jìn)一步調(diào)整就是

1、采用偵聽器監(jiān)聽用戶名的變化
2、如果用戶名發(fā)生變化（調(diào)用后臺(tái)接口進(jìn)行驗(yàn)證）
3、根據(jù)驗(yàn)證的結(jié)果調(diào)整提示信息

代碼

基本布局

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

通過監(jiān)聽器實(shí)現(xiàn)具體功能

<script type="text/javascript" src="../js/vue.js"></script>
 <script type="text/javascript">
  /* 偵聽器
  采用偵聽器監(jiān)聽用戶名的變化
  如果用戶名發(fā)生變化（調(diào)用后臺(tái)接口進(jìn)行驗(yàn)證）
  根據(jù)驗(yàn)證的結(jié)果調(diào)整提示信息 */
  var vm = new Vue({
   el: "#app",
   data: {
    uname: '',
    tip: ''
   },
   methods: {
    checkName: function (uname) {
     // 調(diào)用接口，但是可以使用定時(shí)任務(wù)的方式模擬接口調(diào)用
     var that = this;
     setTimeout(function () {
      // 模擬接口調(diào)用
      if (uname == 'admin') {
       that.tip = '用戶名已經(jīng)存在，請(qǐng)更換一個(gè)'
      } else {
       that.tip = '用戶名可以使用'
      }
     }, 1000)
    }
   },
   watch: {
    uname: function (val) {
     // 調(diào)用后臺(tái)接口驗(yàn)證用戶名的合法性
     this.checkName(val);
     this.tip = '正在驗(yàn)證...'
    }
   },

  });
</script>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。