Vue 验证用户名是否可用

代码 1678 人阅读 | 0 人回复

<

当正在输进框中输进姓名，落空核心时考证能否存正在，
假如曾经存正在，提醒重新输进，假如没有存正在，提醒可使用。
代码以下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>侦听器案例</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="msg"> {{ span1 }}
</div>
<script>
// 侦听器来侦听当前的数据变革，当文本框中的数据落空核心的时分，
// 把文本框中的值拿到背景来操纵，按照背景返返来的数据停止判定，从而给出提醒
var vm = new Vue({
el: "#app",
data: {
msg: "",
span1: "",
},
methods: {
show1: function (val) {//那个处所的val便是文本框中的值
// 施行同步恳求，来背景拿数据，模仿来背景拿数据
var that = this; //由于setTimeout内里也有this工具，this工具是document工具
setTimeout(function () { //那内里写 val 了话他是没有会进if的
if (val === "aaa") {
that.span1 = "用户名不成以利用，请换一个";
} else {
that.span1 = "用户名可使用";
}
}, 2000);
}
},
watch: {
msg: function (val) {
this.show1(val);
this.span1 = "正正在考证中";
},
}
})
</script>
</body>
</html>

复造代码

结果以下

免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！

1、本网站属于个人的非赢利性网站，转载的文章遵循原作者的版权声明，如果原文没有版权声明，按照目前互联网开放的原则，我们将在不通知作者的情况下，转载文章;如果原文明确注明“禁止转载”，我们一定不会转载。如果我们转载的文章不符合作者的版权声明或者作者不想让我们转载您的文章的话，请您发送邮箱：Cdnjson@163.com提供相关证明，我们将积极配合您！
2、本网站转载文章仅为传播更多信息之目的，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性，但不保证信息的正确性和完整性，且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务，本网站概不负责，亦不负任何法律责任。
4、本网站所刊发、转载的文章，其版权均归原作者所有，如其他媒体、网站或个人从本网下载使用，请在转载有关文章时务必尊重该文章的著作权，保留本网注明的“稿件来源”，并自负版权等法律责任。

回复关闭延时

使用道具举报