Vue简易登录注册模版(基于ElementUI)
目录
- Vue简易登录注册模版(基于ElementUI)
- Login.vue
- Register.vue
Login.vue
<script>
import RegisterView from '@/components/register.vue'export default {name: 'LoginView',data() {const checkUsername = (rule, value, callback) => {if (!value) {return callback(new Error('用户名不能为空'));}else {callback();}};const validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {callback();}};return {LoginComponents: true,ruleForm: {username: '',pass: '',},rules: {username: [{validator: checkUsername, trigger: 'blur'}],pass: [{validator: validatePass, trigger: 'blur'}],},}},methods: {toRegister() {this.LoginComponents = !this.LoginComponents}},components: {RegisterView}
}
</script><template><div class="main"><el-row :gutter="24"><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8" id="main_bord" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"><div class="grid-content bg-purple" v-if="LoginComponents"><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model.number="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary">登录</el-button><el-button @click="toRegister">注册</el-button></el-form-item></el-form></div><div class="grid-content bg-purple" v-else><RegisterView></RegisterView></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row></div>
</template><style scoped>
.grid-content {border-radius: 4px;min-height: 36px;
}
</style>
Register.vue
<script>
import LoginView from '@/views/Login.vue'
export default {data() {const checkUsername = (rule, value, callback) => {if (!value) {return callback(new Error('用户名不能为空'));} else {callback();}};const validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};const validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.pass) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm: {pass: '',checkPass: '',username: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],username: [{ validator: checkUsername, trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}
}
</script><template><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model.number="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="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>
</template><style scoped></style>