vuejs组件中的用户php验证码

Posted 2023-02-22

【中文标题】vuejs组件中的用户php验证码

【英文标题】：user php captcha in vuejs component

【发布时间】：2018-01-27 07:17:55

【问题描述】：

在 Laravel 5.4.20 和 VueJS 中。我想在我的 ue 模态组件中使用一个简单的代码验证码（我不想使用 reCaptcha）。我该怎么做？

我正在像这样使用 Mewebstudio Captcha：

Route::any('captcha-test', function()

    if (Request::getMethod() == 'POST')
    
        $rules = ['captcha' => 'required|captcha'];
        $validator = Validator::make(Input::all(), $rules);
        if ($validator->fails())
        
            echo '<p style="color: #ff0000;">Incorrect!</p>';
        
        else
        
            echo '<p style="color: #00ff30;">Matched :)</p>';
        
    

    $form = '<form method="post" action="captcha-test">';
    $form .= '<input type="hidden" name="_token" value="' . csrf_token() . '">';
    $form .= '<p>' . captcha_img() . '</p>';
    $form .= '<p><input type="text" name="captcha"></p>';
    $form .= '<p><button type="submit" name="check">Check</button></p>';
    $form .= '</form>';
    return $form;
);

但它只适用于 php 文档（我需要在 Vue 组件中）。

【参考方案1】：

为此，您的route 将如下所示：

Route::post('captcha-test', function() 
    $validator = Validator::make(Input::all(), [
        'captcha' => 'required|captcha'
    ])->validate();

    return response(['status' => 'ok'], 200);
);

还有你的 Vue 组件，像这样：

Vue.component('captcha', 
  props: ['image'],
  
  data: function () 
    return 
      form: 
        captcha: null
      ,
      isWorking: false
    
  ,
  
  methods: 
    check: function () 
      var self = this
      self.isWorking = true
      
      axios.post('/captcha-test', 
        captcha: self.form.captcha
      )
      .then(function (response) 
        // valid captcha...
        console.log(response);
        
        // reset the form
        self.form.captcha = null
        // now, is not working
        self.isWorking = false
      )
      .catch(function (err) 
        // invalid captch..
        console.log(err);
        
        // reset the form
        self.form.captcha = null
        // now, is not working
        self.isWorking = false
      );
    
  
);

new Vue(
  el: '#app'
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css" rel="stylesheet"/>


<div id="app" class="section">

  <captcha image="<img src='https://c22blog.files.wordpress.com/2010/10/input-black.gif' style='width: 150px;'>" inline-template>
    <div class="box">
      <div v-html="image"></div>

      <form @submit.prevent="check">
        <div class="field">
          <div class="control">
            <input class="input" type="text" placeholder="Captcha" v-model="form.captcha" required>
          </div>
        </div>

        <div class="field">
          <div class="control">
            <button type="submit" class="button is-primary" :class="'is-loading': isWorking" :disabled="isWorking">Check</button>
          </div>
        </div>
      </form>
    </div>
  </captcha>
  
</div>