用HTML做一个手机号加验证码发送框
时间: 2024-06-01 21:11:36 浏览: 14
<!DOCTYPE html>
<html>
<head>
<title>手机号加验证码发送框</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form action="#" method="post">
<label for="phone">手机号:</label>
<input type="tel" id="phone" name="phone" placeholder="请输入手机号"><br><br>
<label for="code">验证码:</label>
<input type="text" id="code" name="code" placeholder="请输入验证码">
<button type="button" onclick="sendCode()">发送验证码</button><br><br>
<input type="submit" value="提交">
</form>
<script>
function sendCode() {
// TODO: 实现发送验证码的逻辑
alert("验证码已发送,请注意查收!");
}
</script>
</body>
</html>
相关问题
用HTML和js做一个注册页面 包含用户名 密码 邮箱 手机号 验证码
以下是一个简单的注册页面的HTML和js代码,包含用户名、密码、邮箱、手机号和验证码的输入框和提交按钮:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h1>注册页面</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone">手机号:</label>
<input type="tel" id="phone" name="phone"><br><br>
<label for="verify">验证码:</label>
<input type="text" id="verify" name="verify">
<button id="btn-verify">获取验证码</button><br><br>
<input type="submit" value="注册">
</form>
<script>
// 验证码获取按钮的点击事件处理函数
document.getElementById("btn-verify").onclick = function() {
// TODO: 发送获取验证码的请求
alert("验证码已发送,请注意查收!");
};
// 注册表单的提交事件处理函数
document.querySelector("form").onsubmit = function() {
// TODO: 验证表单数据的有效性,并提交注册请求
alert("注册成功!");
return false; // 阻止表单默认提交行为
};
</script>
</body>
</html>
```
上面的代码中,我们使用了HTML5的新特性,如`<input>`元素的`type`属性值为`email`和`tel`,可以在移动设备上打开相应的输入法键盘;以及`<label>`元素的`for`属性,可以将标签与表单元素关联起来,提升表单的可用性和可访问性。
在注册页面中,我们使用了JavaScript来实现获取验证码的功能和提交表单的处理逻辑。在获取验证码的按钮上添加了一个点击事件处理函数,用于模拟发送验证码的请求,并提示用户验证码已发送。在表单的提交事件处理函数中,我们可以对表单数据进行验证,并向服务器提交注册请求。在这个例子中,我们只是简单地弹出一个提示框,告诉用户注册成功了。
用vue写一个前端手机发送验证码登录代码
这里是一个用 Vue.js 实现前端手机发送验证码登录的示例代码:
```html
<template>
<div>
<label>手机号:</label>
<input v-model="phone" type="text"><br>
<label>验证码:</label>
<input v-model="code" type="text">
<button @click="sendCode" :disabled="isDisabled">{{ buttonText }}</button>
<button @click="login" :disabled="!isLoginEnabled">登录</button>
<p v-if="error" class="error">{{ error }}</p>
</div>
</template>
<script>
export default {
data() {
return {
phone: '',
code: '',
isDisabled: false,
buttonText: '获取验证码',
countdown: 60,
timer: null,
error: ''
}
},
computed: {
isLoginEnabled() {
return this.phone && this.code
}
},
methods: {
sendCode() {
// 发送验证码的逻辑,这里只是简单的模拟
if (!this.phone) {
this.error = '请输入手机号'
return
}
this.isDisabled = true
this.buttonText = `${this.countdown}s`
this.timer = setInterval(() => {
if (this.countdown > 0) {
this.countdown--
this.buttonText = `${this.countdown}s`
} else {
clearInterval(this.timer)
this.isDisabled = false
this.buttonText = '获取验证码'
this.countdown = 60
this.timer = null
}
}, 1000)
},
login() {
// 登录的逻辑,这里只是简单的模拟
if (this.code !== '123456') {
this.error = '验证码错误'
return
}
alert('登录成功')
}
}
}
</script>
<style>
.error {
color: red;
}
</style>
```
在这个示例中,我们使用了 `phone` 和 `code` 两个数据属性来分别绑定手机号和验证码的输入框。当点击获取验证码按钮时,会调用 `sendCode` 方法,这个方法会模拟发送验证码的过程,同时将按钮设置为不可用状态。在倒计时结束后,按钮会恢复可用状态。
当用户输入完手机号和验证码后,登录按钮才会变为可用状态,点击登录按钮时会调用 `login` 方法,这个方法会简单的检查验证码是否正确,然后弹出登录成功的提示框。
对于错误信息的展示,我们使用了一个 `error` 数据属性来绑定错误信息的显示,如果有错误信息,就会在页面上显示红色的错误提示。