vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用
本文實(shí)例為大家分享了vue驗(yàn)證用戶名是否可用的具體代碼,供大家參考,具體內(nèi)容如下
驗(yà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)用后臺接口進(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='http://www.leifengta.com.cn/js/vue.js'></script> <script type='text/javascript'> /* 偵聽器 采用偵聽器監(jiān)聽用戶名的變化 如果用戶名發(fā)生變化(調(diào)用后臺接口進(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)用接口,但是可以使用定時任務(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)用后臺接口驗(yàn)證用戶名的合法性 this.checkName(val); this.tip = ’正在驗(yàn)證...’ } }, });</script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 解決Android studio xml界面無法預(yù)覽問題2. 基于android studio的layout的xml文件的創(chuàng)建方式3. 詳解Android studio 動態(tài)fragment的用法4. Android如何加載Base64編碼格式圖片5. 圖文詳解vue中proto文件的函數(shù)調(diào)用6. Spring Boot和Thymeleaf整合結(jié)合JPA實(shí)現(xiàn)分頁效果(實(shí)例代碼)7. 什么是python的自省8. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟9. Vuex localStorage的具體使用10. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備