利用vue怎么对用户名进行验证 - 行业资讯 - 肥雀云

　　介绍

利用vue怎么对用户名进行验证?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

实现步骤(思路)

1,通过v模型实现数据绑定
2,需要提供提示信息
3,需要侦听器监听输入信息的变化
4,需要修改触发的事件

进一步调整就是

1,采用侦听器监听用户名的变化
2,如果用户名发生变化(调用后台接口进行验证)
3,根据验证的结果调整提示信息

代码

基本布局

& lt; div id=癮pp"比; 　　& lt;才能span>用户名:& lt;/span> 　　& lt;才能span> 　　,,& lt; input 类型=皌ext", v-model.lazy=皍name"比; 　　& lt;才能/span> 　　& lt;才能span> 　　,,{{提示}} 　　& lt;才能/span> 　　& lt;/div>

通过监听器实现具体功能

& lt; script 类型=拔谋?javascript", src=? ./js/vue.js"祝辞& lt;/script> 　　,& lt; script 类型=拔谋?javascript"比;/*,才能侦听器　　采才能用侦听器监听用户名的变化　　,,如果用户名发生变化(调用后台接口进行验证) 　　,,根据验证的结果调整提示信息,*/var 才能;vm =, Vue ({new 　　,,,el:“# app", 　　,,,数据:{ 　　,,,uname:, & # 39; & # 39; 　　,,,提示:,& # 39;& # 39; 　　,,}, 　　,,,方法:{ 　　,,,checkName:, function (uname), { 　　,,,,//,调用接口,但是可以使用定时任务的方式模拟接口调用　　,,,,var that =,; 　　,,,,setTimeout (function (), { 　　,,,,,//,模拟接口调用　　,,,,,if (uname ==, & # 39;行政与# 39;),{ 　　,,,,,,that.tip =, & # 39;用户名已经存在,请更换一个& # 39; 　　,,,,,},{else 　　,,,,,,that.tip =, & # 39;用户名可以使用& # 39; 　　,,,,,} 　　,,,,},,1000) 　　,,,} 　　,,}, 　　,,,看:{ 　　,,,uname:, function (val), { 　　,,,,//,调用后台接口验证用户名的合法性　　,,,,this.checkName (val); 　　,,,,this.tip =, & # 39;正在验证……& # 39; 　　,,,} 　　,,}, 　　　　,,}); 　　& lt;/script>

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