vue實(shí)現(xiàn)登錄注冊(cè)模板的示例代碼
更新時(shí)間：2021年04月01日 10:50:56 作者：~李疆
這篇文章主要介紹了vue實(shí)現(xiàn)登錄注冊(cè)模板的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
模板1：
login.vue
<template>
<p class="login">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="登錄" name="first">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="名稱" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
<el-form-item label="密碼" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登錄</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="注冊(cè)" name="second">
<register></register>
</el-tab-pane>
</el-tabs>
</p>
</template>
<script>
import register from '@/components/register';
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('請(qǐng)輸入密碼'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
return {
activeName: 'first',
ruleForm: {
name: '',
pass: '',
checkPass: ''
},
rules: {
name: [{ required: true, message: '請(qǐng)輸入您的名稱', trigger: 'blur' }, { min: 2, max: 5, message: '長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' }],
pass: [{ required: true, validator: validatePass, trigger: 'blur' }]
}
};
},
methods: {
//選項(xiàng)卡切換
handleClick(tab, event) {},
//重置表單
resetForm(formName) {
this.$refs[formName].resetFields();
},
//提交表單
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$message({
type: 'success',
message: '登錄成功'
});
this.$router.push('home');
} else {
console.log('error submit!!');
return false;
}
});
}
},
components: {
register
}
};
</script>
<style lang="scss">
.login {
width: 400px;
margin: 0 auto;
}
.el-tabsitem {
text-align: center;
width: 60px;
}
</style>
register.vue
//register組件
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用戶名" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
<el-form-item label="密碼" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
<el-form-item label="確認(rèn)密碼" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input></el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">注冊(cè)</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('請(qǐng)輸入密碼'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('兩次輸入密碼不一致!'));
} else {
callback();
}
};
return {
activeName: 'second',
ruleForm: {
name: '',
pass: '',
checkPass: ''
},
rules: {
name: [{ required: true, message: '請(qǐng)輸入您的名稱', trigger: 'blur' }, { min: 2, max: 5, message: '長(zhǎng)度在 2 到 5 個(gè)字符', trigger: 'blur' }],
pass: [{ required: true, validator: validatePass, trigger: 'blur' }],
checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$message({
type: 'success',
message: '注冊(cè)成功'
});
// this.activeName: 'first',
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
效果圖
模板2：
login.vue
<template>
<el-row type="flex" justify="center">
<el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="login()">
<el-form-item prop="userName" label="用戶名"><el-input v-model="formData.userName" placeholder="請(qǐng)輸入用戶名" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
<el-form-item prop="password" label="密碼"><el-input v-model="formData.password" placeholder="請(qǐng)輸入密碼" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
</el-form-item>
<el-form-item><el-button type="primary" class="btn" @click="login('formData')" icon="el-icon-upload">登錄</el-button>
<el-button @click="resetForm('formData')">重置</el-button></el-form-item></el-form-item>
<router-link to="register">沒(méi)有密碼？注冊(cè)</router-link>
</el-form>
</el-row>
</template>
<script>
export default {
data() {
return {
formData: {
userName: '',
password: ''
},
rules: {
userName: [{ required: true, message: '用戶名不能為空', trigger: 'blur' }],
password: [{ required: true, message: '密碼不能為空', trigger: 'blur' }]
}
};
},
methods: {
login(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$message({
type: 'success',
message: '登錄成功'
});
this.$router.push({name:'home'});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
register.vue
<template>
<el-row type="flex" justify="center">
<el-form ref="formData" :model="formData" :rules="rules" label-width="80px" @keyup.enter.native="register()">
<el-form-item prop="userName" label="用戶名"><el-input v-model="formData.userName" placeholder="請(qǐng)輸入用戶名" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
<el-form-item prop="password" label="密碼"><el-input v-model="formData.password" placeholder="請(qǐng)輸入密碼" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
<el-form-item prop="cheackPassword" label="確認(rèn)密碼"><el-input v-model="formData.cheackPassword" placeholder="再次輸入密碼" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register('formData')" icon="el-icon-upload">注冊(cè)</el-button>
<el-button @click="resetForm('formData')">重置</el-button></el-form-item>
<router-link to="login">已有密碼？登錄</router-link>
</el-form>
</el-row>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a'));
} else if (value !== this.formData.password) {
callback(new Error('兩次輸入密碼不一致!'));
} else {
callback();
}
};
return {
formData: {
userName: '',
password: '',
cheackPassword:''
},
rules: {
userName: [{ required: true, message: '用戶名不能為空', trigger: 'blur' }],
password: [{ required: true, message: '密碼不能為空', trigger: 'blur' }],
cheackPassword: [{ required: true, validator: validatePass, trigger: 'blur' }]
}
};
},
methods: {
register(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$message({
type: 'success',
message: '注冊(cè)成功'
});
this.$router.push({name:'login'});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
效果圖
到此這篇關(guān)于vue實(shí)現(xiàn)登錄注冊(cè)模板的示例代碼的文章就介紹到這了,更多相關(guān)vue 登錄注冊(cè)模板內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
詳解Vue中是如何實(shí)現(xiàn)cache緩存的
這篇文章分享一個(gè)比較有意思的東西，那就是Vue中如何實(shí)現(xiàn)cache緩存的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
在Vue中使用xlsx組件實(shí)現(xiàn)Excel導(dǎo)出功能的步驟詳解
在現(xiàn)代Web應(yīng)用程序中,數(shù)據(jù)導(dǎo)出到Excel格式是一項(xiàng)常見(jiàn)的需求,Vue.js是一種流行的JavaScript框架,允許我們構(gòu)建動(dòng)態(tài)的前端應(yīng)用程序,本文將介紹如何使用Vue.js和xlsx組件輕松實(shí)現(xiàn)Excel數(shù)據(jù)導(dǎo)出功能,需要的朋友可以參考下2023-10-10
vue css 引入asstes中的圖片無(wú)法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無(wú)法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟
這篇文章主要介紹了webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟，詳細(xì)的介紹了兩種調(diào)試vue項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
Vue2.x配置路由導(dǎo)航守衛(wèi)實(shí)現(xiàn)用戶登錄和退出
之前在Vue的學(xué)習(xí)中通過(guò)路由導(dǎo)航守衛(wèi)控制實(shí)現(xiàn)了用戶登錄模塊的功能，本文基于Vue2.x進(jìn)行實(shí)現(xiàn)，在此將實(shí)現(xiàn)過(guò)程進(jìn)行記錄與總結(jié)，感興趣的可以了解一下2021-08-08
vue3中vue.config.js配置Element-plus組件和Icon圖標(biāo)實(shí)現(xiàn)按需自動(dòng)引入實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于vue3中vue.config.js配置Element-plus組件和Icon圖標(biāo)實(shí)現(xiàn)按需自動(dòng)引入的相關(guān)資料,在Vue 3中可以通過(guò)配置vue.config.js文件來(lái)進(jìn)行按需自動(dòng)引入,需要的朋友可以參考下2024-02-02
Vue keepAlive頁(yè)面強(qiáng)制刷新方式
這篇文章主要介紹了Vue keepAlive頁(yè)面強(qiáng)制刷新方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
el-select與el-tree結(jié)合使用實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)多選框
我們?cè)趯?shí)際開(kāi)發(fā)中需要用到下拉樹(shù),elementUI是沒(méi)有這個(gè)組件的,我們就要自己去寫(xiě)了,下面這篇文章主要給大家介紹了關(guān)于el-select與el-tree結(jié)合使用實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)多選框的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue中使用v-print打印出現(xiàn)空白頁(yè)問(wèn)題及解決
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁(yè)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09