<!DOCTYPE html>
<html lang="en">
<head>
<meta name="author" content="小袁同学,1971788445@qq.com,广州新华学院">
<meta name="Keywords" content="小袁博客,小袁Java学习站,小袁Java学习平台,文章,博客,小袁博客,article,blog">
<meta name="description" content="小袁博客,小袁Java学习站,小袁Java学习平台,文章,博客,小袁博客,article,blog,分享Java相关的知识和经验以及各大框架的项目开发提供Java学习的圈子">
<meta http-equiv="content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="shortcut icon" href="/static/img/favicon.ico">
<title>登录</title>
<!-- 本页样式 -->
<link rel="stylesheet" href="./css/login.css">
<!-- element ui -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="./js/vue@2.js"></script>
</head>
<body>
<div id="main">
<div class="info">
<div class="login">
<div class="form sign-in">
<h2>欢迎回来</h2>
<div class="user-form">
<el-form label-position="top" label-width="100px" :model="userLoginForm" :rules="rules" ref="userLoginForm">
<el-form-item prop="account">
<el-input prefix-icon="el-icon-user" placeholder="用户名/邮箱/手机号码1" v-model="userLoginForm.account"
class="input-with-select" maxlength="25" clearable>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="el-icon-lock"
v-model="userLoginForm.password"
placeholder="请填写密码"
maxlength="20"
@keyup.native.enter="submitForm('userLoginForm')"
show-password clearable></el-input>
</el-form-item>
</el-form>
</div>
<p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
<button type="button" class="submit" @click="submitForm('userLoginForm')">登 录</button>
<button type="button" class="more">其他 <span>登录方式</span> 正在完整中</button>
</div>
<!-- 切换栏 -->
<div class="sub-cont">
<div class="img">
<div class="img__text m--up">
<h2>还未注册？</h2>
<p>立即注册，一起来学习Java吧</p>
</div>
<div class="img__text m--in">
<h2>已有帐号？</h2>
<p>有帐号就登录吧，好久不见了！</p>
</div>
<div class="img__btn" @click="loginStatus = !loginStatus">
<span class="m--up">注 册</span>
<span class="m--in">登 录</span>
</div>
</div>
<div class="form sign-up">
<h2>立即注册</h2>
<div class="user-form">
<el-form label-position="top" label-width="100px" :model="userRegisterForm" :rules="rules"
ref="userRegisterForm">
<el-form-item prop="account">
<el-input placeholder="请填写账号" v-model="userRegisterForm.account" maxlength="25"
class="input-with-select" :type="userRegisterForm.select == 3 ? 'number' : ''" clearable>
<el-select v-model="userRegisterForm.select" slot="prepend" placeholder="登录方式">
<el-option label="用户名" value="1"></el-option>
<el-option label="邮箱" value="2"></el-option>
<el-option label="手机号码" value="3"></el-option>
</el-select>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="el-icon-lock" v-model="userRegisterForm.password"
placeholder="请填写密码" maxlength="20" show-password clearable></el-input>
</el-form-item>
<el-form-item prop="passwordConfirm">
<el-input prefix-icon="el-icon-lock"
v-model="userRegisterForm.passwordConfirm"
placeholder="请确认密码"
maxlength="20"
@keyup.native.enter="submitForm('userRegisterForm')"
show-password clearable></el-input>
</el-form-item>
<el-form-item v-if="userRegisterForm.select != 1" prop="code">
<el-input prefix-icon="el-icon-key"
v-model="userRegisterForm.code"
placeholder="请填写6位验证码"
maxlength="6"
@keyup.native.enter="submitForm('userRegisterForm')"
type="number">
<el-button slot="append" @click="sendCodeRequest()" :disabled="codeDisabled">{{ codeMsg }}</el-button>
</el-input>
</el-form-item>
</el-form>
</div>
<button type="button" class="submit" @click="submitForm('userRegisterForm')">注 册</button>
<button type="button" class="more">其他 <span>注册方式</span> 正在完善中</button>
</div>
</div>
</div>
</div>
</div>
<!-- jquery -->
<script type="text/javascript" src="./js/jquery-1.11.3.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="module">
import validator from "./js/validator.js";
var app = new Vue({
el: '#main',
data() {
var valiAccount = (rule, value, callback) => {
if (!value) {
return callback(new Error('请填写账号'));
}
// 注册下, 验证
if (!this.loginStatus) {
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
return callback(new Error("不能填写文字"))
}
switch (this.userRegisterForm.select) {
case "1":
if (!/(?=.*[a-zA-Z])[a-zA-Z0-9]{5,20}/.test(value)) {
return callback(new Error("请输入 5-20 个字符，只能包含数字、大小写字母 且 至少包含一个字母"))
}
break;
case "2":
if (!/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/.test(value)) {
return callback(new Error('请填写正确的邮箱'))
}
break;
case "3":
if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(value)) {
return callback(new Error('请填写正确的手机号码'))
}
break;
}
}
callback();
};
var valiPassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请填写密码'));
}else if (value.length < 6 || value.length > 20) {
callback(new Error('密码长度在 6 - 20 个字符之间'))
}else {
if (this.userRegisterForm.passwordConfirm !== '') {
this.$refs.userRegisterForm.validateField('passwordConfirm');
}
}
callback();
};
var valiPasswordConfirm = (rule, value, callback) => {
if (value === '') {
callback(new Error('请填写确认密码'));
} else if (value !== this.userRegisterForm.password) {
callback(new Error('两次填写密码不一致!'));
} else {
callback();
}
};
var valiCode = (rule, value, callback) => {
if (value === '') {
callback(new Error('请填写6位验证码'));
}
callbac
html动态登录注册页面
33 浏览量
2024-03-05
17:41:13
上传
评论 2
收藏 6.99MB ZIP 举报
简约动态登录模板.zip （11个子文件） 
js 
validator.js 368B vue@2.js 105KB jquery-1.11.3.js 288KB img 
login_bg.jpg 338KB login-form_bg.jpg 245KB css login.css 6KB
index.html 11KB 效果图 
截图3.png 1.93MB 截图2.png 1.95MB 截图1.png 1.89MB
演示.mp4 592KB资源评论
