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:
|
<<: Detailed explanation of MySQL master-slave replication read-write separation construction
>>: Detailed example of removing duplicate data in MySQL
The skills that front-end developers need to mast...
1. Introduction: If we want to display flash conte...
[Solution 1: padding implementation] principle: I...
This article records the installation and configu...
When making a web page, we usually need to consid...
In order to avoid repeatedly entering the Docker ...
We all know that Apache can easily set rewrites f...
A simple example of how to use the three methods ...
Introduction Based on docker container and docker...
This article shares the installation tutorial of ...
Problem description: When inserting Chinese chara...
During the development process, I often encounter...
Note: In web development, after adding autocomplet...
To search for RocketMQ images, you can search on ...
Table of contents Preface Core code File shows pa...