利用vue怎么對用戶名進行驗證

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

實現步驟(思路）

1、通過v-model實現數據綁定
2、需要提供提示信息
3、需要偵聽器監聽輸入信息的變化
4、需要修改觸發的事件

進一步調整就是

1、采用偵聽器監聽用戶名的變化
2、如果用戶名發生變化（調用后臺接口進行驗證）
3、根據驗證的結果調整提示信息

代碼

基本布局

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

通過監聽器實現具體功能

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

  });
</script>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。