vue 验证用户名可不可用功能的思路及代�

Admin 2021-04-17 群英技术资� 299 次浏�

       现在很多账户信息注册都要求用户名唯一,也就是说用户名已经存在使用的,那么就不可再注册。因此我们在做用户注册页面时,就需要验证用户名是否可用。实现效果为,如果用户名已经存在,那么提示更换一个用户名,如果不存在那么提示用户名可用。下面是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实现用户名验证的介绍就到这,上述有详细的代码以及实现思路,用户名验证是前端开发比较常遇到的需求,大家可以深入了解一下,希望本文对大家有帮助�

群英智防CDN,智能加速解决方案

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部