Jadual Kandungan
推荐答案
Rumah pembangunan bahagian belakang tutorial php 求js代码能够将用户输入的手机号,验证,并传入后台的代码

求js代码能够将用户输入的手机号,验证,并传入后台的代码

May 01, 2017 am 10:15 AM

前端页面如下

求js代码能够将用户输入的手机号,验证,并传入后台的代码

<p class="form-group">
    {!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
    <p class="col-md-5">
        {!! Form::text('phone',null,['class'=>'form-control']) !!}
    </p>
    <p class="col-md-4">
        <p class="form-control-static">
        <a href="#">发送验证码</a>
        </p>
    </p>
</p>
Salin selepas log masuk

后台发送方法位sendVerifyMessage,对应的路由为domain/send-verify-message
求js代码能够将用户输入的手机号,验证,并传入后台的代码。

回答:

需要jquery 和 jquery.cookie

var SendCode = (function($, Cookies) {
    return {
        _config : {sendObj:$('#sendCode'), mobile:$('input[name=mobile]')},
        _timer : null,
        /**
         * 初始化发化验证码类
         *
         */
        init : function(config) {
            this._initDisable();
            $.extend(this._config, config);
            
            return this;
        },
        /**
         * 异步检查手机号是否合法
         */
        AsynCheckMobile : function(url, data, successCallback, errorCallback) {
            this.doPost({ url: url, data:data, successCallback:successCallback, errorCallback:errorCallback});
        },
        /**
         *    发送验证码
         */         
        sendCode : function(url, data, successCallback, errorCallback) {
            this.doPost({ url: url, data:data, successCallback:successCallback, errorCallback:errorCallback});
        },
        /**
         * 异步交互动作
         */
        doPost : function(params) {
            if (toString.call(params.successCallback) !== "[object Function]") {
                params.successCallback = function() {};
            }
            
            if (toString.call(params.errorCallback) !== "[object Function]") {
                params.errorCallback = function() {};
            }
            
            var _this = this;
            $.ajax({
                url : params.url,
                data : params.data,
                type : 'post',
                dataType : 'json',
                success : function(result) {
                    if (result.code == 200) {
                        params.successCallback.call(_this, result);
                    } else {
                        params.errorCallback.call(_this, result);
                    }
                }
            })
        },
        checkMobile: function() {
            return /\d{11}/.test(this._config.mobile.val());
        },
        /**
         *    禁用按钮
         */
        _disableButton : function() {
            
            var TotalSeconds = 60;
            var storeState = Cookies.getJSON('state');
            storeState = storeState || {TotalSeconds:TotalSeconds, enable:false};
            Cookies.set('state', JSON.stringify(storeState), {path:''});
            this._config.sendObj.prop('disabled', true);
            var _this = this;
            this._timer = setInterval(function() {
                var _state = Cookies.getJSON('state');
                if (_state.TotalSeconds <= 0) {
                    clearInterval(_this._timer);
                    Cookies.remove(&#39;state&#39;, { path: &#39;&#39; });
                    _this._config.sendObj.removeAttr(&#39;disabled&#39;);
                    _this._config.sendObj.html(&#39;发送验证码&#39;);
                } else {
                    _this._config.sendObj.html(_state.TotalSeconds + &#39;秒后发送&#39;);
                    _state.TotalSeconds -= 1;
                    Cookies.set(&#39;state&#39;, _state, {path:&#39;&#39;})
                }
            }, 1000);
        },
        _initDisable : function() {
            var _state = Cookies.getJSON(&#39;state&#39;);
            if (_state) {
                this._disableButton();
            }
        }
    }
})(jQuery, Cookies);
Salin selepas log masuk
   var AsynV = {
        &#39;asynValidateCode&#39; : function(data, successCallback, errorCallback) {
            data = data || { code:$(&#39;input[name=captcha]&#39;).val()};
            successCallback = successCallback || function() { return true;};
            errorCallback = errorCallback || function() {return false;};
            $.post(&#39;/simple/_asyn_check_code&#39;, data, function(result) {
                if (200 == result.code) {
                    (successCallback)();
                } else {
                    (errorCallback)();
                }
            }, &#39;json&#39;);
        }
    };
    
    SendCode.init();
    $(&#39;#sendCode&#39;).bind(&#39;click&#39;, function() {
    
        var captcha = $(&#39;input[name=captcha]&#39;).val();
        if (captcha != &#39;&#39;) {
            AsynV.asynValidateCode({ code:captcha}, function() {
                if (SendCode.checkMobile()) {
                    SendCode.sendCode(&#39;/simple/_send_mobile_validate_code&#39;, { mobile:SendCode._config.mobile.val()}, function(result) {
                        alert(result.message);
                        this._disableButton();
                    }, function(result) {
                        alert(result.message);
                    });
                } else {
                    alert(&#39;不正确的手机号&#39;);
                }
            }, function() {
                alert(&#39;图形验证码不正确&#39;);
            });
        } else {
            alert(&#39;请先输入图形验证码&#39;);
        }
        
    });
Salin selepas log masuk

推荐答案

HTML:

<p class="form-group">
    {!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
    <p class="col-md-5">
        {!! Form::text('phone',null,['class'=>'form-control']) !!}
    </p>
    <p class="col-md-4">
        <p class="form-control-static">
        <a id="send-captcha" href="#">发送验证码</a>
        </p>
    </p>
</p>
Salin selepas log masuk

JS:

<script>
    // 定义按钮btn
    var btn = $("#send-captcha");
         
    // 定义发送时间间隔(s)
    var SEND_INTERVAL = 60;
    var timeLeft = SEND_INTERVAL;
    
    /**
    * 绑定btn按钮的监听事件
    */
    var bindBtn = function(){
        btn.click(function(){
            // 需要先禁用按钮(为防止用户重复点击)
            btn.unbind('click');
            btn.attr('disabled', 'disabled');
            $.ajax({
                // ajax接口调用...
            })
            .done(function () {
                alert('发送成功');
                //成功
                timeLeft = SEND_INTERVAL;
                timeCount();                
            })
            .fail(function () {
                //失败,弹窗
                alert('发送失败');

                // ** 重要:因为发送失败,所以要恢复发送按钮的监听 **
                bindBtn();
                btn.remove('disabled');
            });
        })
    }           
    
    /**
    * 重新发送计时
    **/ 
    
    var timeCount = function() {
        window.setTimeout(function() {
            if(timeLeft > 0) {
                timeLeft -= 1;
                btn.html(timeLeft + "后重新发送");
                timeCount();
            } else {
                btn.html("重新发送");
                bindBtn();
            }
        }, 1000);
    }
</script>
Salin selepas log masuk
                               
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimanakah sesi merampas kerja dan bagaimana anda dapat mengurangkannya dalam PHP? Bagaimanakah sesi merampas kerja dan bagaimana anda dapat mengurangkannya dalam PHP? Apr 06, 2025 am 12:02 AM

Sesi rampasan boleh dicapai melalui langkah -langkah berikut: 1. Dapatkan ID Sesi, 2. Gunakan ID Sesi, 3. Simpan sesi aktif. Kaedah untuk mengelakkan rampasan sesi dalam PHP termasuk: 1. Gunakan fungsi Sesi_Regenerate_ID () untuk menjana semula ID Sesi, 2. Data sesi stor melalui pangkalan data, 3.

Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API. Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API. Apr 05, 2025 am 12:04 AM

JWT adalah standard terbuka berdasarkan JSON, yang digunakan untuk menghantar maklumat secara selamat antara pihak, terutamanya untuk pengesahan identiti dan pertukaran maklumat. 1. JWT terdiri daripada tiga bahagian: header, muatan dan tandatangan. 2. Prinsip kerja JWT termasuk tiga langkah: menjana JWT, mengesahkan JWT dan muatan parsing. 3. Apabila menggunakan JWT untuk pengesahan di PHP, JWT boleh dijana dan disahkan, dan peranan pengguna dan maklumat kebenaran boleh dimasukkan dalam penggunaan lanjutan. 4. Kesilapan umum termasuk kegagalan pengesahan tandatangan, tamat tempoh, dan muatan besar. Kemahiran penyahpepijatan termasuk menggunakan alat debugging dan pembalakan. 5. Pengoptimuman prestasi dan amalan terbaik termasuk menggunakan algoritma tandatangan yang sesuai, menetapkan tempoh kesahihan dengan munasabah,

Huraikan prinsip -prinsip yang kukuh dan bagaimana ia memohon kepada pembangunan PHP. Huraikan prinsip -prinsip yang kukuh dan bagaimana ia memohon kepada pembangunan PHP. Apr 03, 2025 am 12:04 AM

Penerapan prinsip pepejal dalam pembangunan PHP termasuk: 1. Prinsip Tanggungjawab Tunggal (SRP): Setiap kelas bertanggungjawab untuk hanya satu fungsi. 2. Prinsip Terbuka dan Tutup (OCP): Perubahan dicapai melalui lanjutan dan bukannya pengubahsuaian. 3. Prinsip Penggantian Lisch (LSP): Subkelas boleh menggantikan kelas asas tanpa menjejaskan ketepatan program. 4. Prinsip Pengasingan Antara Muka (ISP): Gunakan antara muka halus untuk mengelakkan kebergantungan dan kaedah yang tidak digunakan. 5. Prinsip Inversi Ketergantungan (DIP): Modul peringkat tinggi dan rendah bergantung kepada abstraksi dan dilaksanakan melalui suntikan ketergantungan.

Bagaimana cara debug mod CLI dalam phpstorm? Bagaimana cara debug mod CLI dalam phpstorm? Apr 01, 2025 pm 02:57 PM

Bagaimana cara debug mod CLI dalam phpstorm? Semasa membangun dengan PHPStorm, kadang -kadang kita perlu debug PHP dalam mod Interface Line Command (CLI) ...

Bagaimana cara menetapkan kebenaran secara automatik UnixSocket selepas sistem dimulakan semula? Bagaimana cara menetapkan kebenaran secara automatik UnixSocket selepas sistem dimulakan semula? Mar 31, 2025 pm 11:54 PM

Bagaimana untuk menetapkan keizinan UnixSocket secara automatik selepas sistem dimulakan semula. Setiap kali sistem dimulakan semula, kita perlu melaksanakan perintah berikut untuk mengubahsuai keizinan UnixSocket: sudo ...

Terangkan pengikatan statik lewat dalam php (statik: :). Terangkan pengikatan statik lewat dalam php (statik: :). Apr 03, 2025 am 12:04 AM

Mengikat statik (statik: :) Melaksanakan pengikatan statik lewat (LSB) dalam PHP, yang membolehkan kelas panggilan dirujuk dalam konteks statik dan bukannya menentukan kelas. 1) Proses parsing dilakukan pada masa runtime, 2) Cari kelas panggilan dalam hubungan warisan, 3) ia boleh membawa overhead prestasi.

Bagaimana cara menghantar permintaan pos yang mengandungi data JSON menggunakan perpustakaan php curl? Bagaimana cara menghantar permintaan pos yang mengandungi data JSON menggunakan perpustakaan php curl? Apr 01, 2025 pm 03:12 PM

Menghantar data JSON menggunakan perpustakaan Curl PHP dalam pembangunan PHP, sering kali perlu berinteraksi dengan API luaran. Salah satu cara biasa ialah menggunakan perpustakaan curl untuk menghantar post ...

See all articles