el-form 表单手机验证码
时间: 2023-10-09 07:14:08 浏览: 44
你可以使用 `el-form` 表单来实现手机验证码的功能。下面是一个示例代码,演示了如何在表单中添加手机号码输入框和验证码输入框,并在发送验证码按钮点击后触发发送验证码的逻辑:
```html
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="手机号码" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="验证码" prop="code">
<el-input v-model="form.code"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="sendCode" :disabled="disableSendButton">发送验证码</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
phone: '',
code: ''
},
disableSendButton: false // 控制发送验证码按钮是否禁用
};
},
methods: {
sendCode() {
// 发送验证码的逻辑
// 在这里可以调用后端接口发送验证码到用户手机
// 可以使用第三方库或者自己实现短信发送功能
// 发送成功后禁用发送按钮并设置倒计时
this.disableSendButton = true;
let countDown = 60; // 倒计时时间,单位为秒
const timer = setInterval(() => {
countDown--;
if (countDown <= 0) {
clearInterval(timer);
this.disableSendButton = false;
}
}, 1000);
}
}
};
</script>
```
上述代码中,`el-form` 用于包裹表单项,`el-input` 用于输入手机号码和验证码。发送验证码的逻辑在 `sendCode` 方法中实现,你可以根据实际需求来调用后端接口发送验证码到用户手机。在发送成功后,通过设置 `disableSendButton` 来禁用发送按钮,并使用计时器实现倒计时功能。
请注意,上述示例代码只是一个简单的示例,你需要根据实际情况进行适当的修改和完善。