Sample code for implementing login and registration template in Vue

Sample code for implementing login and registration template in Vue

Template 1:

login.vue

<template>
	<p class="login">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="Login" name="first">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="Name" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
 
					<el-form-item label="Password" 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')">Login</el-button>
 
						<el-button @click="resetForm('ruleForm')">Reset</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
 
			<el-tab-pane label="Register" 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('Please enter your password'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
 
				callback();
			}
		};
 
		return {
			activeName: 'first',
			ruleForm: {
				name: '',
				pass: '',
				checkPass: ''
			},
			rules:
				name: [{ required: true, message: 'Please enter your name', trigger: 'blur' }, { min: 2, max: 5, message: 'Length must be between 2 and 5 characters', trigger: 'blur' }],
				pass: [{ required: true, validator: validatePass, trigger: 'blur' }]
			}
		};
	},
 
	methods: {
		//Tab switching handleClick(tab, event) {},
		//Reset the form resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		//Submit the form submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.$message({
						type: 'success',
						message: 'Login successful'
					});
					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 component <template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		<el-form-item label="username" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item>
		<el-form-item label="Password" prop="pass"><el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input></el-form-item>
		<el-form-item label="Confirm Password" 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')">Register</el-button>
			<el-button @click="resetForm('ruleForm')">Reset</el-button>
		</el-form-item>
	</el-form>
</template>
 
<script>
export default {
	data() {
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('Please enter your password'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
 
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('Please enter your password again'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('The passwords entered twice do not match!'));
			} else {
				callback();
			}
		};
 
		return {
			activeName: 'second',
			ruleForm: {
				name: '',
				pass: '',
				checkPass: ''
			},
			rules:
				name: [{ required: true, message: 'Please enter your name', trigger: 'blur' }, { min: 2, max: 5, message: 'Length must be between 2 and 5 characters', 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: 'Registration successful'
					});
					// this.activeName: 'first',
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
 
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

Rendering

Template 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="Username"><el-input v-model="formData.userName" placeholder="Please enter your username" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
    <el-form-item prop="password" label="Password"><el-input v-model="formData.password" placeholder="Please enter your password" 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">Login</el-button>
     <el-button @click="resetForm('formData')">Reset</el-button></el-form-item></el-form-item>
     <router-link to="register">No password? Register</router-link>
   </el-form>
  </el-row>
</template>
<script>
export default {
 data() {
  return {
   formData: {
    userName: '',
    password: ''
   },
   rules:
    userName: [{ required: true, message: 'Username cannot be empty', trigger: 'blur' }],
    password: [{ required: true, message: 'The password cannot be empty', trigger: 'blur' }]
   }
  };
 },
 methods: {
  login(formName) {
 
    this.$refs[formName].validate(valid => {
				if (valid) {
					this.$message({
						type: 'success',
						message: 'Login successful'
          });
           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="Username"><el-input v-model="formData.userName" placeholder="Please enter your username" prefix-icon="icon-login_user" clearable></el-input></el-form-item>
    <el-form-item prop="password" label="Password"><el-input v-model="formData.password" placeholder="Please enter your password" type="password" prefix-icon="icon-login_pwd" clearable></el-input></el-form-item>
    <el-form-item prop="cheackPassword" label="Confirm Password"><el-input v-model="formData.cheackPassword" placeholder="Enter password again" 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">Register</el-button>
      <el-button @click="resetForm('formData')">Reset</el-button></el-form-item>
     <router-link to="login">Already have a password? Login</router-link>
 
   </el-form>
  </el-row>
</template>
<script>
export default {
 data() {
   var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('Please enter your password again'));
			} else if (value !== this.formData.password) {
				callback(new Error('The passwords entered twice do not match!'));
			} else {
				callback();
			}
		};
 
  return {
   formData: {
    userName: '',
    password: '',
    cheackPassword:''
   },
   rules:
    userName: [{ required: true, message: 'Username cannot be empty', trigger: 'blur' }],
    password: [{ required: true, message: 'Password cannot be empty', trigger: 'blur' }],
    cheackPassword: [{ required: true, validator: validatePass, trigger: 'blur' }]
 
   }
  };
 },
 methods: {
  register(formName) {
   this.$refs[formName].validate(valid => {
				if (valid) {
					this.$message({
						type: 'success',
						message: 'Registration successful'
          });
           this.$router.push({name:'login'});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
  },
  resetForm(formName) {
			this.$refs[formName].resetFields();
		}
 
 }
};
</script>

Rendering

This is the end of this article about the sample code of Vue to implement login and registration template. For more relevant Vue login and registration template content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue learning road login registration example code
  • Vue.js implements user comment, login, registration, and information modification functions
  • Detailed explanation of vue login registration example
  • How to register and keep logged in in Vue
  • The idea and process of Vue to realize the function of remembering account and password

<<:  Detailed explanation of MySQL master-slave replication read-write separation construction

>>:  Detailed example of removing duplicate data in MySQL

Recommend

Introduction to install method in Vue

Table of contents 1. Globally registered componen...

Will the deprecated Docker be replaced by Podman?

The Kubernetes team recently announced that it wi...

How to hide and remove scroll bars in HTML

1. HTML tags with attributes XML/HTML CodeCopy co...

Getting Started Tutorial for Beginnersâ‘§: Easily Create an Article Site

In my last post I talked about how to make a web p...

Detailed explanation of JavaScript Promise and Async/Await

Table of contents Overview Four examples Example ...

MySQL 5.7.23 installation and configuration method graphic tutorial

This article records the installation tutorial of...

MySQL 8.0.25 installation and configuration method graphic tutorial

The latest download and installation tutorial of ...

MySQL index knowledge summary

The establishment of MySQL index is very importan...

Web Design Experience: Efficiently Writing Web Code

Originally, this seventh chapter should be a deep ...

MySQL slow log online problems and optimization solutions

MySQL slow log is a type of information that MySQ...

MySQL slow query and query reconstruction method record

Preface What is a slow query and how to optimize ...

IE8 browser will be fully compatible with Web page standards

<br />According to foreign media reports, in...

Implementation code of html floating prompt box function

General form prompts always occupy the form space...

Solve the problem that ifconfig and addr cannot see the IP address in Linux

1. Install the Linux system on the virtual machin...

Vue implements the magnifying glass function of the product details page

This article shares the specific code of Vue to i...