利用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>

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。