register () { var _this = this if (this.registerForm.password !== this.registerForm.passwordConfirm) { this.$message({ message: '两次输入的密码不一致', type: 'error'
时间: 2023-12-18 13:05:14 浏览: 29
缺少了 register 方法的右括号,建议补上,完整的代码如下:
```
register () {
var _this = this
if (this.registerForm.password !== this.registerForm.passwordConfirm) {
this.$message({
message: '两次输入的密码不一致',
type: 'error'
})
return
}
// ...其他代码
}
```
此处代码的作用是在注册时判断两次输入的密码是否一致,若不一致则给出提示并停止执行后续代码。
相关问题
用bootstrap做一个登陆注册页面代码(要有中文注释) 1.注册和登录可以切换 2.注册成功会跳转到登陆 3.注册失败会有提示:用户名已经存在 4.注册信息发送到controller,判断是否存在 5.可以让我复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登陆注册页面</title>
<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<!-- 登陆和注册切换按钮 -->
<div class="text-center mb-3">
<button class="btn btn-primary" id="loginBtn">登陆</button>
<button class="btn btn-secondary" id="registerBtn">注册</button>
</div>
<!-- 登陆表单 -->
<form action="#" method="POST" id="loginForm">
<div class="form-group">
<label for="loginUsername">用户名:</label>
<input type="text" class="form-control" id="loginUsername" name="loginUsername">
</div>
<div class="form-group">
<label for="loginPassword">密码:</label>
<input type="password" class="form-control" id="loginPassword" name="loginPassword">
</div>
<button type="submit" class="btn btn-primary">登陆</button>
</form>
<!-- 注册表单 -->
<form action="#" method="POST" id="registerForm" style="display:none">
<div class="form-group">
<label for="registerUsername">用户名:</label>
<input type="text" class="form-control" id="registerUsername" name="registerUsername">
</div>
<div class="form-group">
<label for="registerPassword">密码:</label>
<input type="password" class="form-control" id="registerPassword" name="registerPassword">
</div>
<div class="form-group">
<label for="registerConfirmPassword">确认密码:</label>
<input type="password" class="form-control" id="registerConfirmPassword" name="registerConfirmPassword">
</div>
<button type="submit" class="btn btn-primary">注册</button>
</form>
<!-- 注册成功提示框 -->
<div class="alert alert-success mt-3" id="registerSuccess" style="display:none">
注册成功!请返回登陆。
</div>
<!-- 注册失败提示框 -->
<div class="alert alert-danger mt-3" id="registerFail" style="display:none">
用户名已经存在,请重新输入。
</div>
</div>
<!-- 引入jQuery和Bootstrap的JavaScript文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(function () {
// 切换登陆和注册表单
$('#loginBtn').click(function () {
$('#loginForm').show();
$('#registerForm').hide();
$('#registerSuccess').hide();
$('#registerFail').hide();
$(this).removeClass('btn-secondary').addClass('btn-primary');
$('#registerBtn').removeClass('btn-primary').addClass('btn-secondary');
});
$('#registerBtn').click(function () {
$('#loginForm').hide();
$('#registerForm').show();
$('#registerSuccess').hide();
$('#registerFail').hide();
$(this).removeClass('btn-secondary').addClass('btn-primary');
$('#loginBtn').removeClass('btn-primary').addClass('btn-secondary');
});
// 注册表单提交
$('#registerForm').submit(function (e) {
e.preventDefault();
var username = $('#registerUsername').val();
var password = $('#registerPassword').val();
var confirmPassword = $('#registerConfirmPassword').val();
// 判断两次输入的密码是否一致
if (password !== confirmPassword) {
alert('两次输入的密码不一致!');
return;
}
// 发送注册请求
$.ajax({
url: '/register',
type: 'POST',
data: {username: username, password: password},
success: function (res) {
if (res.code === 0) {
// 注册成功,显示提示框并跳转到登陆
$('#registerSuccess').show();
setTimeout(function () {
$('#loginBtn').click();
}, 2000);
} else {
// 注册失败,显示提示框
$('#registerFail').show();
}
}
});
});
});
</script>
</body>
</html>
写一个flask-vue-elementui登录注册页面
好的,以下是一个简单的 Flask-Vue-ElementUI 登录注册页面的实现。
1. 创建 Flask 应用
首先,创建一个 Flask 应用,并添加必要的依赖:
```python
from flask import Flask, jsonify, request, render_template
from flask_cors import CORS
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///test.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
app.config['SECRET_KEY'] = 'secret-key'
db = SQLAlchemy(app)
CORS(app)
# 定义 User 数据模型
class User(db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(50), unique=True)
password = db.Column(db.String(50))
def __repr__(self):
return '<User %r>' % self.username
# 创建数据库
with app.app_context():
db.create_all()
```
2. 创建前端页面
在 `templates` 目录下创建 `index.html` 文件,用 ElementUI 创建一个登录和注册页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login/Register</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-tabs v-model="activeTab">
<el-tab-pane label="Login" name="login">
<el-form label-width="80px" ref="form" :model="loginForm" :rules="loginRules" class="demo-ruleForm">
<el-form-item label="Username" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login('form')">Login</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="Register" name="register">
<el-form label-width="80px" ref="form" :model="registerForm" :rules="registerRules" class="demo-ruleForm">
<el-form-item label="Username" prop="username">
<el-input v-model="registerForm.username"></el-input>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input type="password" v-model="registerForm.password"></el-input>
</el-form-item>
<el-form-item label="Confirm Password" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register('form')">Register</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
activeTab: 'login',
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [
{ required: true, message: 'Please enter your username', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please enter your password', trigger: 'blur' }
]
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
},
registerRules: {
username: [
{ required: true, message: 'Please enter your username', trigger: 'blur' }
],
password: [
{ required: true, message: 'Please enter your password', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: 'Please confirm your password', trigger: 'blur' },
{ validator: validateConfirmPassword, trigger: 'blur' }
]
}
},
methods: {
login(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('/login', this.loginForm)
.then(response => {
if (response.data.success) {
alert('Login Success!');
} else {
alert('Login Failed!');
}
})
.catch(error => {
console.log(error);
});
} else {
console.log('Login Form Invalid!');
return false;
}
});
},
register(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
axios.post('/register', this.registerForm)
.then(response => {
if (response.data.success) {
alert('Register Success!');
this.activeTab = 'login';
} else {
alert('Register Failed!');
}
})
.catch(error => {
console.log(error);
});
} else {
console.log('Register Form Invalid!');
return false;
}
});
},
validateConfirmPassword(rule, value, callback) {
if (value !== this.registerForm.password) {
callback(new Error('The two passwords do not match'));
} else {
callback();
}
}
}
});
</script>
</body>
</html>
```
3. 创建后端 API
在 `app.py` 文件中创建登录和注册的 API:
```python
# 登录API
@app.route('/login', methods=['POST'])
def login():
username = request.json['username']
password = request.json['password']
user = User.query.filter_by(username=username).first()
if user is not None and user.password == password:
return jsonify({'success': True})
return jsonify({'success': False})
# 注册API
@app.route('/register', methods=['POST'])
def register():
username = request.json['username']
password = request.json['password']
user = User(username=username, password=password)
db.session.add(user)
db.session.commit()
return jsonify({'success': True})
```
4. 运行应用
最后,在命令行中运行应用:
```bash
$ export FLASK_APP=app.py
$ export FLASK_ENV=development
$ flask run
```
然后在浏览器中打开 `http://localhost:5000` 就可以看到登录和注册页面了。