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如何实现验证用户名是否可用就介绍到这了。与其指望遇到一个谁,不如指望自己能够吸引那样的人;与其指望每次失落的时候会有正能量出现温暖自己,不如指望自己变成一个正能量满满的人;与其担心未来,不如现在好好努力。更多相关vue如何实现验证用户名是否可用内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
Vue路由参数的传递与获取方式详细介绍

vue学习记录之动态组件浅析

如何解决ElementUI组件中el-upload上传图片不显示问题

解读element el-upload上传的附件名称不显示 file-list赋值

一篇关于el-table-column的formatter的如何使用及说明