vue实现验证用户名是否可用


Posted in Vue.js onJanuary 20, 2021

本文实例为大家分享了vue验证用户名是否可用的具体代码,供大家参考,具体内容如下

验证用户名是否可用

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue实现图书管理小案例
Dec 03 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
vue实现按钮切换图片
Jan 20 #Vue.js
Vue实现图书管理案例
Jan 20 #Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 #Vue.js
vue二选一tab栏切换新做法实现
Jan 19 #Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 #Vue.js
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
Vue实现多页签组件
Jan 14 #Vue.js
You might like
2019十大人气国漫
2020/03/13 国漫
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
python list语法学习(带例子)
2013/11/01 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
如何教少儿学习Python编程
2020/07/10 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
音乐教育感言
2014/03/05 职场文书
12岁生日演讲稿
2014/05/14 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
大学学生会竞选稿
2015/11/19 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
Python基础学习之奇异的GUI对话框
2021/05/27 Python
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL