• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
华梦一生 显示全部楼层 发表于 2021-10-25 19:27:52 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了vue验证用户名是否可用的具体代码,供各人参考,具体内容如下
验证用户名是否可用


案例结果


实现步调(思绪)

1、通过v-model实现数据绑定
2、须要提供提示信息
3、须要侦听器监听输入信息的变革
4、须要修改触发的变乱

进一步调整就是
1、接纳侦听器监听用户名的变革
2、假如用户名发生变革(调用背景接口进行验证)
3、根据验证的结果调整提示信息

代码

根本布局
  1. <div id="app">
  2.   <span>用户名:</span>
  3.   <span>
  4.    <input type="text" v-model.lazy="uname">
  5.   </span>
  6.   <span>
  7.    {{tip}}
  8.   </span>
  9. </div>
复制代码
通过监听器实现具体功能
  1. <script type="text/javascript" src="../js/vue.js"></script>
  2. <script type="text/javascript">
  3.   /* 侦听器
  4.   采用侦听器监听用户名的变化
  5.   如果用户名发生变化(调用后台接口进行验证)
  6.   根据验证的结果调整提示信息 */
  7.   var vm = new Vue({
  8.    el: "#app",
  9.    data: {
  10.     uname: '',
  11.     tip: ''
  12.    },
  13.    methods: {
  14.     checkName: function (uname) {
  15.      // 调用接口,但是可以使用定时任务的方式模拟接口调用
  16.      var that = this;
  17.      setTimeout(function () {
  18.       // 模拟接口调用
  19.       if (uname == 'admin') {
  20.        that.tip = '用户名已经存在,请更换一个'
  21.       } else {
  22.        that.tip = '用户名可以使用'
  23.       }
  24.      }, 1000)
  25.     }
  26.    },
  27.    watch: {
  28.     uname: function (val) {
  29.      // 调用后台接口验证用户名的合法性
  30.      this.checkName(val);
  31.      this.tip = '正在验证...'
  32.     }
  33.    },
  34.   });
  35. </script>
复制代码
以上就是本文的全部内容,渴望对各人的学习有所资助,也渴望各人多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作