本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程(cainiaojc.com)。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。