VUE-侦听器实现验证用户名是否被注册过

1 通过v-model实现数据绑定
2 需要提供验证信息
3 需要侦听器监听输入信息的变化
4 通过v-model.lazy监听事件

代码如下

 <div id="app">
    <span>用户名:</span>
    <span>
      <input type="text" v-model.lazy='uname'>
    </span>
    <span>{{tip}}</span>
  </div>
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 = '用户名可以使用'
            }
          }, 2000)
        }
      },
      watch: {
        uname: function (val) {
          //调用后台接口验证用户名的合法性
          this.checkName(val);
          //修改验证信息
          this.tip = '正在验证。。。'
        }
      },
    });

效果

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读