手机号验证码功能

最新推荐文章于 2024-07-19 18:41:59 发布

38kcok9w2vHanx_

最新推荐文章于 2024-07-19 18:41:59 发布

阅读量186

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Hanx_/article/details/139927813

版权

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="myRuleForm">
            <el-form-item label="手机号:" prop="phonenumber">
                <el-input
                v-model="ruleForm.phonenumber"
                placeholder="请输入手机号"
                ></el-input>
            </el-form-item>
            <el-form-item label="验证码:" prop="validateCode">
                <el-input placeholder="请输入验证码" v-model="ruleForm.validateCode">
                    <el-button slot="append" :disabled="messageCodeVis" @click="sendCode">{{countdown}}</el-button>
                </el-input>
            </el-form-item>
            <el-form-item>
                <div style="display: flex; justify-content: center">
                <el-button type="danger" @click="submitForm('myRuleForm')">提交</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default{
    data() {
        return {
            ruleForm: {
                phonenumber: '',
                validateCode: '',
            },
            rules: {
                phonenumber: [
                    {  required: true,message: "手机号不能为空",trigger: "blur"},
                    { pattern: /^1\d{10}$/,message: "请输入正确的手机号码", trigger: "blur"}
                ],
                validateCode: [
                    {  required: true,message: "请输入验证码",trigger: "blur"},
                ]
            },
            countdown: '获取验证码',
            messageCodeVis: false
        }
    },
    methods: {
        sendCode(){
            const reg = /^1\d{10}$/;
            if(!this.ruleForm.phonenumber) return this.$toast.fail('请输入手机号')
            if (!reg.test(this.ruleForm.phonenumber)) return this.$toast.fail('请输入正确的手机号码')
            // 获取验证码，接口事件
            // sendMessage({
            //     phoneNumbers: this.ruleForm.phonenumber
            // }).then((res) => {
            //     if(res.code == 200){
                    this.countdown = 60
                    this.messageCodeVis = true
                    this.startCountdown()
            //     }
            // });
        },
        startCountdown(){
            const intervalId = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(intervalId)
                    this.messageCodeVis = false
                    this.countdown = '请输入验证码'
                }
            }, 1000)
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('可以提交');
                }else{
                    console.log('no no no');
                }
            })
        }
    }
}
</script>

页面样式：