vue實現(xiàn)登錄注冊模板的示例代碼
更新時間：2021年04月01日 10:50:56 作者：~李疆
這篇文章主要介紹了vue實現(xiàn)登錄注冊模板的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
模板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="注冊" 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('請輸入密碼'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
return {
activeName: 'first',
ruleForm: {
name: '',
pass: '',
checkPass: ''
},
rules: {
name: [{ required: true, message: '請輸入您的名稱', trigger: 'blur' }, { min: 2, max: 5, message: '長度在 2 到 5 個字符', trigger: 'blur' }],
pass: [{ required: true, validator: validatePass, trigger: 'blur' }]
}
};
},
methods: {
//選項卡切換
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="確認密碼" 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')">注冊</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('請輸入密碼'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('請再次輸入密碼'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('兩次輸入密碼不一致!'));
} else {
callback();
}
};
return {
activeName: 'second',
ruleForm: {
name: '',
pass: '',
checkPass: ''
},
rules: {
name: [{ required: true, message: '請輸入您的名稱', trigger: 'blur' }, { min: 2, max: 5, message: '長度在 2 到 5 個字符', 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: '注冊成功'
});
// 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="請輸入用戶名" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
<el-form-item prop="password" label="密碼"><el-input v-model="formData.password" placeholder="請輸入密碼" 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">沒有密碼？注冊</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="請輸入用戶名" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
<el-form-item prop="password" label="密碼"><el-input v-model="formData.password" placeholder="請輸入密碼" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
<el-form-item prop="cheackPassword" label="確認密碼"><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">注冊</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('請再次輸入密碼'));
} 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: '注冊成功'
});
this.$router.push({name:'login'});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
效果圖
到此這篇關于vue實現(xiàn)登錄注冊模板的示例代碼的文章就介紹到這了,更多相關vue 登錄注冊模板內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了Vue的列表渲染，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了詳解關于vue-area-linkage走過的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
很多Vue項目中都需要PDF文件預覽功能,比如合同ERP,銷售CRM,內(nèi)部文檔CMS管理系統(tǒng),內(nèi)置PDF文件在線預覽功能,下面這篇文章主要給大家介紹了關于如何在vue中實現(xiàn)文件預覽功能的相關資料,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了vue+animation動畫實現(xiàn)跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章給大家分享了基于vue實現(xiàn)一個簡單的MVVM框架的相關內(nèi)容，有需要的朋友們可以參考學習下。2018-08-08
vue 不使用select實現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用，需要的朋友可以參考下2018-05-05
這篇文章主要給大家介紹了關于vue中實現(xiàn)頁面刷新以及局部刷新的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-01-01
Vue之el-select結合v-if動態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結合v-if動態(tài)控制template顯示隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3+ts+vant移動端H5項目搭建的實現(xiàn)步驟
本文主要介紹了vue3+ts+vant移動端H5項目搭建，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11