当前位置:Gxlcms > PHP教程 > 求js代码能够将用户输入的手机号,验证,并传入后台的代码

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

时间:2021-07-01 10:21:17 帮助过:36人阅读

前端页面如下

  1. <p class="form-group">
  2. {!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
  3. <p class="col-md-5">
  4. {!! Form::text('phone',null,['class'=>'form-control']) !!}
  5. </p>
  6. <p class="col-md-4">
  7. <p class="form-control-static">
  8. <a href="#">发送验证码</a>
  9. </p>
  10. </p>
  11. </p>

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

回答:

需要jquery 和 jquery.cookie

  1. var SendCode = (function($, Cookies) {
  2. return {
  3. _config : {sendObj:$('#sendCode'), mobile:$('input[name=mobile]')},
  4. _timer : null,
  5. /**
  6. * 初始化发化验证码类
  7. *
  8. */
  9. init : function(config) {
  10. this._initDisable();
  11. $.extend(this._config, config);
  12. return this;
  13. },
  14. /**
  15. * 异步检查手机号是否合法
  16. */
  17. AsynCheckMobile : function(url, data, successCallback, errorCallback) {
  18. this.doPost({ url: url, data:data, successCallback:successCallback, errorCallback:errorCallback});
  19. },
  20. /**
  21. * 发送验证码
  22. */
  23. sendCode : function(url, data, successCallback, errorCallback) {
  24. this.doPost({ url: url, data:data, successCallback:successCallback, errorCallback:errorCallback});
  25. },
  26. /**
  27. * 异步交互动作
  28. */
  29. doPost : function(params) {
  30. if (toString.call(params.successCallback) !== "[object Function]") {
  31. params.successCallback = function() {};
  32. }
  33. if (toString.call(params.errorCallback) !== "[object Function]") {
  34. params.errorCallback = function() {};
  35. }
  36. var _this = this;
  37. $.ajax({
  38. url : params.url,
  39. data : params.data,
  40. type : 'post',
  41. dataType : 'json',
  42. success : function(result) {
  43. if (result.code == 200) {
  44. params.successCallback.call(_this, result);
  45. } else {
  46. params.errorCallback.call(_this, result);
  47. }
  48. }
  49. })
  50. },
  51. checkMobile: function() {
  52. return /\d{11}/.test(this._config.mobile.val());
  53. },
  54. /**
  55. * 禁用按钮
  56. */
  57. _disableButton : function() {
  58. var TotalSeconds = 60;
  59. var storeState = Cookies.getJSON('state');
  60. storeState = storeState || {TotalSeconds:TotalSeconds, enable:false};
  61. Cookies.set('state', JSON.stringify(storeState), {path:''});
  62. this._config.sendObj.prop('disabled', true);
  63. var _this = this;
  64. this._timer = setInterval(function() {
  65. var _state = Cookies.getJSON('state');
  66. if (_state.TotalSeconds <= 0) {
  67. clearInterval(_this._timer);
  68. Cookies.remove('state', { path: '' });
  69. _this._config.sendObj.removeAttr('disabled');
  70. _this._config.sendObj.html('发送验证码');
  71. } else {
  72. _this._config.sendObj.html(_state.TotalSeconds + '秒后发送');
  73. _state.TotalSeconds -= 1;
  74. Cookies.set('state', _state, {path:''})
  75. }
  76. }, 1000);
  77. },
  78. _initDisable : function() {
  79. var _state = Cookies.getJSON('state');
  80. if (_state) {
  81. this._disableButton();
  82. }
  83. }
  84. }
  85. })(jQuery, Cookies);
  1. var AsynV = {
  2. 'asynValidateCode' : function(data, successCallback, errorCallback) {
  3. data = data || { code:$('input[name=captcha]').val()};
  4. successCallback = successCallback || function() { return true;};
  5. errorCallback = errorCallback || function() {return false;};
  6. $.post('/simple/_asyn_check_code', data, function(result) {
  7. if (200 == result.code) {
  8. (successCallback)();
  9. } else {
  10. (errorCallback)();
  11. }
  12. }, 'json');
  13. }
  14. };
  15. SendCode.init();
  16. $('#sendCode').bind('click', function() {
  17. var captcha = $('input[name=captcha]').val();
  18. if (captcha != '') {
  19. AsynV.asynValidateCode({ code:captcha}, function() {
  20. if (SendCode.checkMobile()) {
  21. SendCode.sendCode('/simple/_send_mobile_validate_code', { mobile:SendCode._config.mobile.val()}, function(result) {
  22. alert(result.message);
  23. this._disableButton();
  24. }, function(result) {
  25. alert(result.message);
  26. });
  27. } else {
  28. alert('不正确的手机号');
  29. }
  30. }, function() {
  31. alert('图形验证码不正确');
  32. });
  33. } else {
  34. alert('请先输入图形验证码');
  35. }
  36. });

推荐答案

HTML:

  1. <p class="form-group">
  2. {!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
  3. <p class="col-md-5">
  4. {!! Form::text('phone',null,['class'=>'form-control']) !!}
  5. </p>
  6. <p class="col-md-4">
  7. <p class="form-control-static">
  8. <a id="send-captcha" href="#">发送验证码</a>
  9. </p>
  10. </p>
  11. </p>

JS:

  1. <script>
  2. // 定义按钮btn
  3. var btn = $("#send-captcha");
  4. // 定义发送时间间隔(s)
  5. var SEND_INTERVAL = 60;
  6. var timeLeft = SEND_INTERVAL;
  7. /**
  8. * 绑定btn按钮的监听事件
  9. */
  10. var bindBtn = function(){
  11. btn.click(function(){
  12. // 需要先禁用按钮(为防止用户重复点击)
  13. btn.unbind('click');
  14. btn.attr('disabled', 'disabled');
  15. $.ajax({
  16. // ajax接口调用...
  17. })
  18. .done(function () {
  19. alert('发送成功');
  20. //成功
  21. timeLeft = SEND_INTERVAL;
  22. timeCount();
  23. })
  24. .fail(function () {
  25. //失败,弹窗
  26. alert('发送失败');
  27. // ** 重要:因为发送失败,所以要恢复发送按钮的监听 **
  28. bindBtn();
  29. btn.remove('disabled');
  30. });
  31. })
  32. }
  33. /**
  34. * 重新发送计时
  35. **/
  36. var timeCount = function() {
  37. window.setTimeout(function() {
  38. if(timeLeft > 0) {
  39. timeLeft -= 1;
  40. btn.html(timeLeft + "后重新发送");
  41. timeCount();
  42. } else {
  43. btn.html("重新发送");
  44. bindBtn();
  45. }
  46. }, 1000);
  47. }
  48. </script>

人气教程排行