Vue项目中登陆和注册页面的数据判断
本次讲解一下在Vue项目中注册页面和登陆页面中关于输入数据的判断。以我自己做的一个仿某站项目为例。具体项目在我的资源中查看。
这是每个输入框的组件
<template>
<div>
<van-cell-group>
<van-field v-model="content" :label="label" :rule="rule" :placeholder="placeholder" :type="type"/>
</van-cell-group>
</div>
</template>
<script>
export default {
props: ['label','placeholder','type','rule'],
data() {
return {
content:"",
};
},
methods:{
handle(){
const rue=new RegExp(this.rule)
if(rue.test(this.content)){
this.$emit("inputchange",this.content)
}
}
},
watch:{
content(){
this.handle()
}
}
};
</script>
<style scoped>
</style>
//这是Register组件是上面那个组件的父组件
<template>
<div>
<login-top middleTop="注册bilibili">
<div
slot="right"
style="font-size: 3.611vw"
@click="$router.push('/login')"
>
切换到登陆
</div>
</login-top>
<login-text
label="姓名"
rule="^.{6,16}$"
@inputchange="(res) => (model.name = res)"
style="margin: 4.167vw 0"
placeholder="请输入姓名o"
></login-text>
<login-text
label="账号"
rule="^.{6,16}$"
@inputchange="(res) => (model.username = res)"
placeholder="请输入账号"
></login-text>
<login-text
label="密码"
rule="^.{6,16}$"
@inputchange="(res) => (model.password = res)"
placeholder="请输入密码"
type="password"
></login-text>
<login-btn data="注册" @registerSubmit="registerSubmit"></login-btn>
</div>
</template>
<script>
import LoginBtn from "../components/LoginBtn.vue";
import LoginText from "../components/LoginText.vue";
import LoginTop from "../components/LoginTop.vue";
export default {
components: { LoginTop, LoginText, LoginBtn },
name: "Register",
data() {
return {
model: {
name: "",
username: "",
password: "",
},
};
},
methods: {
async registerSubmit() {
let rulg = /^.{6,16}/;
if (
rulg.test(this.model.name) &&
rulg.test(this.model.username) &&
rulg.test(this.model.password)
) {
const res = await this.$http.post("/register", this.model);
this.$msg.fail(res.data.msg);
localStorage.setItem("token", res.data.objtoken);
localStorage.setItem("id", res.data.id);
} else {
this.$msg.fail("格式不正确,请输入正确格式");
}
},
success() {},
},
};
</script>
<style scoped>
</style>
我们在data中定义一个content,这是输入框内容的数据。然后使用v-model对content进行双向绑定。
然后使用watch(){}对content进行监听。对于watch不明白的可以看下我这篇博客watch的使用
当用户在输入框中输入数据时就会触发content(){}函数。调用handle函数。RegExp()是将字符串的正则表达式转换成正则。然后如果我们正则匹配成功则就像父组件发送事件名为inputchange,并且将this,content中的数据一起发送过去。
在父组件相应的位置绑定inputChange事件,并且在data中定义model
然后在inputChange事件中将输入的数据传递给modle中相应的属性。
在注册按钮中绑定registerSubmit事件。如果输入的数据匹配正则那么我们就发送ajax请求。
登陆的判断和注册差不多就少了一个name,这就不再多说。
//登陆组件
<template>
<div>
<login-top middleTop="登陆bilibili">
<div
slot="right"
style="font-size: 3.611vw"
@click="$router.push('/register')"
>
用户注册
</div>
</login-top>
<login-text
style="margin: 4.167vw 0"
label="账号"
rule="^.{6,16}$"
@inputchange="(res) => (username = res)"
placeholder="请输入账号"
></login-text>
<login-text
label="密码"
rule="^.{6,16}$"
@inputchange="(res) => (password = res)"
placeholder="请输入密码"
type="password"
></login-text>
<login-btn data="登陆" @registerSubmit="registerSubmit"></login-btn>
</div>
</template>
<script>
import LoginBtn from "../components/LoginBtn.vue";
import LoginText from "../components/LoginText.vue";
import LoginTop from "../components/LoginTop.vue";
export default {
components: { LoginTop, LoginText, LoginBtn },
name: "Register",
data() {
return {
username: "",
password: "",
};
},
methods: {
async registerSubmit() {
if (this.username && this.password) {
const res = await this.$http.post("/login", {
username: this.username,
password: this.password,
});
console.log(res);
this.$msg.fail(res.data.msg);
localStorage.setItem("token", res.data.token);
localStorage.setItem("id", res.data.id);
setTimeout(() => {
this.$router.push("/userinfo");
}, 2000);
} else {
this.$msg.fail("格式不正确,请输入正确格式");
}
},
},
};
</script>
<style scoped>
</style>