vue實現登入註冊模板的示例程式碼
阿新 • • 發佈：2021-04-05
模板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: '',pwww.cppcns.com
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="priwww.cppcns.commary" @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,callback) => { if (value === '') { callback(new Error('請輸入密碼')); } else { if (this.ruleForm.checkPass !== '') { this.$refs.ruleForm.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule,callback) => { if (value === '') { callback(new Error('請再次輸入密碼')); } else if (value !== this.ruleForm.pass) { callback(new Error('兩次輸入密碼不一致!')); } else { callback(); } }; return { activeName: 'second',pass: '',checkPass: [{ required: true,validator: validatePass2,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: '使用者名稱不能為空',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>&www.cppcns.comlt;/el-form-item>
<router-link to="login">已有密碼？登入</router-link>
</el-form>
</el-row>
</template>
<script>
export default {
data() {
var validatePass = (rule,callback) => {
if (value === '') {
callback(new Error('請再次輸入密碼'));
} else if (value !== this.formData.password) {
callback(new Error('兩次輸入密碼不一致!'));
} else {
callback();
}
};
return {
formData: {
userName: '',password: '',cheackPassword:''
},message: '使用者名稱不能zhfitR為空',cheackPassword: [{ required: true,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實現登入註冊模板的示例程式碼的文章就介紹到這了,更多相關vue 登入註冊模板內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！