<div id="register"> <form id="registerForm"> <p>注册账号:<input type="text" id="registerName" name="registerName"></p> <span id="vShow1" class="err_mag" style="display:none">输入格式有误<6-12位></span> <p>密码:<input type="password" id="password" name="password"></p> <span id="vShow2" class="err_mag" style="display:none">输入格式有误<6-12位></span> <br> 验证码<input type="text" id="checkCode" name="checkCode"> <img src="/controller/ImgServlet" id="ImgCheckCode" > <br> <input type="submit" class="button" value="提交"> </form> </div> <script src="js/vue.js"></script> <script src="js/axios-0.18.0.js"></script> <script> new Vue({ el:"#register", submit:axios({ method:"post", url:"http://localhost:8080/controller/RegisterServlet" }).then(function (resp) { alert(resp.data); }) })如何实现提交时执行axios
时间: 2023-06-12 08:02:08 浏览: 68
这段代码是一个包含注册表单的 HTML 页面,并且带有一些 JavaScript 脚本。该表单包括账号、密码和验证码输入框以及一个提交按钮。其中账号和密码都需要输入 6-12 位字符,如果输入格式有误,则会显示对应的错误提示信息。验证码则通过一个图片显示。这段代码依赖于 Vue 和 Axios 两个 JavaScript 库。
相关问题
hbuilder登录注册页面代码
以下是一个简单的 HBuilder 登录注册页面代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login/Register</title>
</head>
<body>
<h1>Login/Register</h1>
<div id="login">
<h2>Login</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<div id="register">
<h2>Register</h2>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<script src="js/login-register.js"></script>
</body>
</html>
```
JavaScript 代码:
```javascript
var loginForm = document.querySelector("#login form");
var registerForm = document.querySelector("#register form");
loginForm.addEventListener("submit", function(e) {
// 阻止表单提交的默认行为
e.preventDefault();
// 获取用户名和密码
var username = document.querySelector("#login #username").value;
var password = document.querySelector("#login #password").value;
// TODO: 处理登录逻辑
});
registerForm.addEventListener("submit", function(e) {
// 阻止表单提交的默认行为
e.preventDefault();
// 获取用户名、邮箱和密码
var username = document.querySelector("#register #username").value;
var email = document.querySelector("#register #email").value;
var password = document.querySelector("#register #password").value;
// TODO: 处理注册逻辑
});
```
注意:这只是一个简单的示例,实际开发中需要更完善的表单验证和后端逻辑处理。
使用vue制作登录注册界面
好的,下面是一个简单的登录注册界面的示例代码:
```
<template>
<div class="container">
<div class="login-form">
<h2>Login</h2>
<form @submit.prevent="login">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" v-model="loginForm.email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" v-model="loginForm.password" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="register-form">
<h2>Register</h2>
<form @submit.prevent="register">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" v-model="registerForm.name" required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" v-model="registerForm.email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" v-model="registerForm.password" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
email: '',
password: ''
},
registerForm: {
name: '',
email: '',
password: ''
}
};
},
methods: {
login() {
// 发送登录请求
},
register() {
// 发送注册请求
}
}
};
</script>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form,
.register-form {
width: 400px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-form h2,
.register-form h2 {
text-align: center;
margin-bottom: 20px;
}
</style>
```
这个示例代码包含了一个登录表单和一个注册表单,使用了Bootstrap样式。你可以根据自己的需要进行修改和扩展。需要注意的是,这个示例代码只包含了前端部分,实现登录注册功能需要与后端进行交互。