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
Table of contents 1. Globally registered componen...
The Kubernetes team recently announced that it wi...
1. HTML tags with attributes XML/HTML CodeCopy co...
In my last post I talked about how to make a web p...
Table of contents Overview Four examples Example ...
This article records the installation tutorial of...
The latest download and installation tutorial of ...
The establishment of MySQL index is very importan...
Originally, this seventh chapter should be a deep ...
MySQL slow log is a type of information that MySQ...
Preface What is a slow query and how to optimize ...
<br />According to foreign media reports, in...
General form prompts always occupy the form space...
1. Install the Linux system on the virtual machin...
This article shares the specific code of Vue to i...