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 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
德生PL330测评
2021/03/02 无线电
程序员编程十条戒律
2009/07/09 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
js实现移动端轮播图效果
2020/12/09 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
Python如何实现单例模式
2016/06/03 面试题
结婚喜宴主持词
2014/03/14 职场文书
年终总结会议主持词
2014/03/17 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
软件售后服务承诺书
2014/05/21 职场文书
妈妈活动方案
2014/08/15 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android