实现注册功能
This commit is contained in:
F嘉阳
@@ -1,22 +1,19 @@
|
||||
var Main = {
|
||||
data() {
|
||||
var checkuserName = (rule, value, callback) => {
|
||||
var checkName = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('用户名不能为空'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
/* setTimeout(() => {
|
||||
if (!Number.isInteger(value)) {
|
||||
callback(new Error('请输入数字值'));
|
||||
} else {
|
||||
if (value < 18) {
|
||||
callback(new Error('必须年满18岁'));
|
||||
} else {
|
||||
callback();
|
||||
};
|
||||
var checkNo = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('学号不能为空'));
|
||||
}
|
||||
};
|
||||
var checkRealName = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('真实姓名不能为空'));
|
||||
}
|
||||
}, 1000);*/
|
||||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
@@ -31,7 +28,7 @@ var Main = {
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.ruleForm2.pass) {
|
||||
} else if (value !== this.ruleForm2.colpassword) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
@@ -39,23 +36,39 @@ var Main = {
|
||||
};
|
||||
return {
|
||||
ruleForm2: {
|
||||
pass: '',
|
||||
colname: '',
|
||||
colpassword: '',
|
||||
checkPass:'',
|
||||
userName: '',
|
||||
email: ''
|
||||
colstudentno: '',
|
||||
colrealname: '',
|
||||
colemail: ''
|
||||
},
|
||||
activeName: 'login',
|
||||
rules2: {
|
||||
pass: [
|
||||
{validator: validatePass, trigger: 'blur'}
|
||||
colpassword: [
|
||||
{required: true,validator: validatePass, trigger: 'blur'}
|
||||
],
|
||||
checkPass: [
|
||||
{validator: validatePass2, trigger: 'blur'}
|
||||
{required: true,validator: validatePass2, trigger: 'blur'}
|
||||
],
|
||||
userName: [
|
||||
{validator: checkuserName, trigger: 'blur'}
|
||||
]
|
||||
colstudentno: [
|
||||
{
|
||||
required: true,
|
||||
validator: checkNo,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
colrealname: [
|
||||
{
|
||||
required: true,
|
||||
validator: checkRealName,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
colname: [
|
||||
{required: true,validator: checkName, trigger: 'blur'}
|
||||
],
|
||||
},
|
||||
activeName:'login',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -9,9 +9,75 @@ axios.get('http://localhost:8080/cms/download/findall')
|
||||
});*/
|
||||
var Main = {
|
||||
data() {
|
||||
var checkName = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('用户名不能为空'));
|
||||
}
|
||||
};
|
||||
var checkNo = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('学号不能为空'));
|
||||
}
|
||||
};
|
||||
var checkRealName = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error('真实姓名不能为空'));
|
||||
}
|
||||
};
|
||||
var validatePass = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入密码'));
|
||||
} else {
|
||||
if (this.ruleForm2.checkPass !== '') {
|
||||
this.$refs.ruleForm2.validateField('checkPass');
|
||||
}
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validatePass2 = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'));
|
||||
} else if (value !== this.ruleForm2.colpassword) {
|
||||
callback(new Error('两次输入密码不一致!'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
activeIndex: '1',
|
||||
activeIndex2: '1',
|
||||
ruleForm2: {
|
||||
colname: '',
|
||||
colpassword: '',
|
||||
checkPass:'',
|
||||
colstudentno: '',
|
||||
colrealname: '',
|
||||
colemail: ''
|
||||
},
|
||||
rules2: {
|
||||
colpassword: [
|
||||
{required: true,validator: validatePass, trigger: 'blur'}
|
||||
],
|
||||
checkPass: [
|
||||
{required: true,validator: validatePass2, trigger: 'blur'}
|
||||
],
|
||||
colstudentno: [
|
||||
{
|
||||
required: true,
|
||||
validator: checkNo,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
colrealname: [
|
||||
{
|
||||
required: true,
|
||||
validator: checkRealName,
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
colname: [
|
||||
{required: true,validator: checkName, trigger: 'blur'}
|
||||
],
|
||||
},
|
||||
activeName:'login',
|
||||
fileList: [{
|
||||
name: 'food.jpeg',
|
||||
url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
|
||||
@@ -32,10 +98,24 @@ var Main = {
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});})
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
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();
|
||||
},
|
||||
handleClick(row) {
|
||||
console.log(row.colfileid);
|
||||
},
|
||||
|
||||
124
src/main/resources/static/loginTest.html
Normal file
124
src/main/resources/static/loginTest.html
Normal file
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>登录</title>
|
||||
<!--
|
||||
<link rel="stylesheet" type="text/css" href="styles.css">
|
||||
-->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<div id="app">
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col
|
||||
:md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<h2>登录系统</h2>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" class="row-bg" justify="center">
|
||||
<el-col :md="12" :lg="12" :xl="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<template>
|
||||
<el-tabs v-model="activeName"
|
||||
@tab-click="handleClick">
|
||||
<el-tab-pane label="登录"
|
||||
name="login">
|
||||
<el-form :model="ruleForm2" status-icon
|
||||
:rules="rules2" ref="ruleForm2" label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
action="/cms/login/dologin"
|
||||
method="POST" name="login">
|
||||
<el-form-item label="用户名"
|
||||
prop="colname">
|
||||
<el-input
|
||||
v-model="ruleForm2.colname" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="colpassword">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
native-type="submit">提交
|
||||
</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="注册" name="register">
|
||||
<el-form
|
||||
:model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"
|
||||
label-width="100px" class="demo-ruleForm"
|
||||
action="/cms/register/doregister"
|
||||
method="POST" name="register">
|
||||
<el-form-item label="用户名"
|
||||
prop="colname">
|
||||
<el-input
|
||||
v-model="ruleForm2.colname" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="colpassword">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input
|
||||
type="password" v-model="ruleForm2.checkPass"
|
||||
auto-complete="off" name="checkPass"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="colemail" label="邮箱"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
]">
|
||||
<el-input v-model="ruleForm2.colemail" name="colemail"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学号"
|
||||
prop="colstudentno">
|
||||
<el-input
|
||||
v-model="ruleForm2.colstudentno" name="colstudentno"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名"
|
||||
prop="colrealname">
|
||||
<el-input
|
||||
v-model="ruleForm2.colrealname" name="colrealname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
native-type="submit">提交
|
||||
</el-button>
|
||||
<el-button @click="resetForm('ruleForm2')">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<script src="js/loginstyle.js"></script>
|
||||
<script src="js/msg.js"></script>
|
||||
<!--<body>
|
||||
<!–<center>
|
||||
<h1>登录系统</h1>
|
||||
<form action="/cms/login/dologin" method="post">
|
||||
<p>用户名：
|
||||
<input type="text" name="colname"></p>
|
||||
<p>密码：
|
||||
<input type="password" name="colpassword"></p>
|
||||
<input type="submit" value="登录">
|
||||
</center>–>
|
||||
</form>-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,6 +2,7 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:th="http://www.thymeleaf.org">
|
||||
<head th:include="dist/thymeleaf/common_head :: header('登录')"></head>
|
||||
<link th:href="@{css/style.css}" rel="stylesheet">
|
||||
<body>
|
||||
<div th:insert="~{dist/thymeleaf/common_head :: #body_js}"></div>
|
||||
<div id="app">
|
||||
@@ -25,16 +26,16 @@
|
||||
:rules="rules2" ref="ruleForm2" label-width="100px"
|
||||
class="demo-ruleForm"
|
||||
action="/cms/login/dologin"
|
||||
method="POST" name="loginTest">
|
||||
method="POST" name="login">
|
||||
<el-form-item label="用户名"
|
||||
prop="userName">
|
||||
prop="colname">
|
||||
<el-input
|
||||
v-model="ruleForm2.userName" name="colname"></el-input>
|
||||
v-model="ruleForm2.colname" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="pass">
|
||||
label="密码" prop="colpassword">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.pass" auto-complete="off" name="colpassword"></el-input>
|
||||
v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
@@ -50,28 +51,38 @@
|
||||
:model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2"
|
||||
label-width="100px" class="demo-ruleForm"
|
||||
action="/cms/register/doregister"
|
||||
method="POST" name="loginTest">
|
||||
method="POST" name="register">
|
||||
<el-form-item label="用户名"
|
||||
prop="userName">
|
||||
prop="colname">
|
||||
<el-input
|
||||
v-model="ruleForm2.userName" name="userName"></el-input>
|
||||
v-model="ruleForm2.colname" name="colname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码" prop="pass">
|
||||
label="密码" prop="colpassword">
|
||||
<el-input type="password"
|
||||
v-model="ruleForm2.pass" auto-complete="off" name="passWord"></el-input>
|
||||
v-model="ruleForm2.colpassword" auto-complete="off" name="colpassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="checkPass">
|
||||
<el-input
|
||||
type="password" v-model="ruleForm2.checkPass"
|
||||
auto-complete="off"></el-input>
|
||||
auto-complete="off" name="checkPass"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email" label="邮箱"
|
||||
<el-form-item prop="colemail" label="邮箱"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
|
||||
]">
|
||||
<el-input v-model="ruleForm2.email"></el-input>
|
||||
<el-input v-model="ruleForm2.colemail" name="colemail"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学号"
|
||||
prop="colstudentno">
|
||||
<el-input
|
||||
v-model="ruleForm2.colstudentno" name="colstudentno"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名"
|
||||
prop="colrealname">
|
||||
<el-input
|
||||
v-model="ruleForm2.colrealname" name="colrealname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary"
|
||||
@@ -87,7 +98,7 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<script th:src="@{js/LoginStyle.js}"></script>
|
||||
<script th:src="@{js/loginstyle.js}"></script>
|
||||
<!--<body>
|
||||
<!–<center>
|
||||
<h1>登录系统</h1>
|
||||
|
||||
Reference in New Issue
Block a user