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

10 skills that make front-end developers worth millions

The skills that front-end developers need to mast...

Several ways to implement CSS height changing with width ratio

[Solution 1: padding implementation] principle: I...

MySQL 8.0.18 installation and configuration method graphic tutorial

This article records the installation and configu...

A quick solution to the problem of PC and mobile adaptation

When making a web page, we usually need to consid...

Execute the shell or program inside the Docker container on the host

In order to avoid repeatedly entering the Docker ...

IIS 7.5 uses URL Rewrite module to achieve web page redirection

We all know that Apache can easily set rewrites f...

Nginx uses reverse proxy to implement load balancing process analysis

Introduction Based on docker container and docker...

How to solve the mysql insert garbled problem

Problem description: When inserting Chinese chara...

Linux platform mysql enable remote login

During the development process, I often encounter...

How to disable the automatic password saving prompt function of Chrome browser

Note: In web development, after adding autocomplet...

Detailed installation and use of RocketMQ in Docker

To search for RocketMQ images, you can search on ...

Implementation example of uploading multiple attachments in Vue

Table of contents Preface Core code File shows pa...