本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
测试使用的是Laravel5.5版本。 安装 composer require tymon/jwt-auth=1.0.0-rc....
1、补零,使得可以按照字符串顺序进行比较。 2、截取保留后三位(ip地址最多就3位...
将input和img放同一行,img标签总是比input高出一个头,非常难看。之前试过好多...
关于Blazor 由于在国内, Blazor一点都不普及, 在阅读此文前, 建议读者先 翻看我...
使用JS实现鼠标放上图片进行放大离开实现缩小功能,具体代码如下所示: !DOCTYPE...
秒杀系统的架构设计 秒杀系统是典型的短时大量突发访问类问题。对这类问题有三种...
效果状态:通过点击锁定状态实现状态锁定与不锁定之间的切换 1.主程序:01.php导...
最近,老鱼听说了一个案例! 某银行计划部署分布式数据库来替换业务核心的集中式...
想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://...
文章目录 单表查询 1.选择表中若干列 【例3.19】查询全体学生姓名和出生年份 【...