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

PHP中文网
Release: 2023-02-28 11:46:02
Original
1867 people have browsed it

前端页面如下

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

{!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}

{!! Form::text('phone',null,['class'=>'form-control']) !!}

发送验证码

Copy after login

后台发送方法位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('state', { path: '' }); _this._config.sendObj.removeAttr('disabled'); _this._config.sendObj.html('发送验证码'); } else { _this._config.sendObj.html(_state.TotalSeconds + '秒后发送'); _state.TotalSeconds -= 1; Cookies.set('state', _state, {path:''}) } }, 1000); }, _initDisable : function() { var _state = Cookies.getJSON('state'); if (_state) { this._disableButton(); } } } })(jQuery, Cookies);
Copy after login
var AsynV = { 'asynValidateCode' : function(data, successCallback, errorCallback) { data = data || { code:$('input[name=captcha]').val()}; successCallback = successCallback || function() { return true;}; errorCallback = errorCallback || function() {return false;}; $.post('/simple/_asyn_check_code', data, function(result) { if (200 == result.code) { (successCallback)(); } else { (errorCallback)(); } }, 'json'); } }; SendCode.init(); $('#sendCode').bind('click', function() { var captcha = $('input[name=captcha]').val(); if (captcha != '') { AsynV.asynValidateCode({ code:captcha}, function() { if (SendCode.checkMobile()) { SendCode.sendCode('/simple/_send_mobile_validate_code', { mobile:SendCode._config.mobile.val()}, function(result) { alert(result.message); this._disableButton(); }, function(result) { alert(result.message); }); } else { alert('不正确的手机号'); } }, function() { alert('图形验证码不正确'); }); } else { alert('请先输入图形验证码'); } });
Copy after login

推荐答案

HTML:

{!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}

{!! Form::text('phone',null,['class'=>'form-control']) !!}

发送验证码

Copy after login

JS:

Copy after login
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!