VUE验证用户名合法性

最新推荐文章于 2022-03-01 16:36:34 发布

二琳爱吃肉

最新推荐文章于 2022-03-01 16:36:34 发布

阅读量431

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45906196/article/details/118250394

版权

VUE 专栏收录该内容

7 篇文章 4 订阅

订阅专栏

效果图

初始状态
用户名存在

用户名不存在，可以使用

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户名</title>
		<script type="text/javascript" src="./js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<p>
				用户名：
				<input type="text" v-model.lazy="username"/>
				{{notice}}
			</p >
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					username:'',
					notice:''
				},
				methods:{
					changeUn(username){
					    if(username=='admin'){
					        this.notice='用户名已经存在，请更换一个'
					    }else{
					        this.notice='用户名可以使用'
					        }
					    }    
					},
				watch:{
				    username:{
				    	handler (val) {
							this.changeUn(val)
						}
				    }
				}
			})
		</script>
	</body>
</html>