vue实战案例2-用户名合法性的验证

月小满

于 2021-01-29 20:04:04 发布

阅读量362

点赞数 1

分类专栏： vue实战文章标签： vue

本文链接：https://blog.csdn.net/weixin_44110923/article/details/113405471

版权

vue实战专栏收录该内容

10 篇文章 1 订阅

订阅专栏

效果如下：在这里插入图片描述

<head>
</head>
<body>
<div id="myvue">
    <span>用户名</span>
    <!--model.lazy在input失去焦点后绑定-->
    <input type="text" v-model.lazy="username">
    <span>{{tip}}</span>
</div>
<script src="js/vue.js"></script>
<script>
var myvue=new Vue({
    el:'#myvue',
    data:{
        username:'',
        tip:''
    },
    methods:{
        //这里应该是调用接口，但是可以使用定时任务的方式模拟接口调用
        changeUn:function(username){
            var that=this;
            setTimeout(function(){
                if(username=='admin'){
                    that.tip='该用户名已使用，请更换！'
                }else{
                    that.tip='用户名可以使用'
                }
            },2000)
        }
        
    },
    watch:{
        username:function(val){
            //调用后台接口验证用户名的合法性
            this.changeUn(val);
            //修改提示信息
            this.tip='正在验证……'
        }
    }
});

</script>
</body>

月小满

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue实战案例2-用户名合法性的验证

效果如下：<head></head><body><div id="myvue"> <span>用户名</span>  <input type="text" v-model.lazy="username"> <span>{{tip}}</span></div><scrip
复制链接

扫一扫

专栏目录