本文實例為大家分享了vue驗證用戶名是否可用的具體代碼，供大家參考，具體內(nèi)容如下

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

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

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

基本布局

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。