Vue -- 登录login验证

<template>

<div class="login">

<Form ref="formRef" :model="loginForm" :rules="formRule" class="form">

<FormItem prop="user">

<Input type="text" v-model="loginForm.user" placeholder="请输入用户名">

<Icon type="ios-person-outline" slot="prepend"></Icon>

</Input>

</FormItem>

<FormItem prop="password">

<Input type="password" password v-model="loginForm.password" placeholder="请输入密码">

<Icon type="ios-lock-outline" slot="prepend"></Icon>

</Input>

</FormItem>

<FormItem>

<Button type="primary" @click="login">登录</Button>

<Button type="default" @click="reset">重置</Button>

</FormItem>

</Form>

</div>

</template>

<script>

export default{

data(){

return{

loginForm:{

user:'',

password:''

},

formRule:{

user:[

{required:true, message:'请输入用户名', trigger: 'blur'}

],

password:[

{required:true, message:'请输入密码', trigger:'blur' },

{min:3, max:10, message:'密码长度在3-10之间' ,trigger:'blur'}

]

}

}

},

methods:{

login(){

this.$refs.formRef.validate((valid) => {

if(valid){

window.sessionStorage.setItem('token','login-token')

const tokenlo = sessionStorage.getItem('token')

console.log(tokenlo)

this.$Message.success('登录成功')

// this.$router.push('/test')

}else{

this.$Message.error('登录失败')

}

})

},

reset(){

this.$refs.formRef.resetFields()

}

}

}

</script>

<style scoped>

.login{width: 400px;height: 200px;background: #fafafa;margin: 10px auto;}

.form{display: flex;flex-direction: column;padding: 30px;}

</style>