Leave a message verification code using tags

When you need to enable the verification code in the website message or comment, you can handle it as follows:

1. Open the backgroundMessage and comment verification code function

2. In the form of leaving a message or comment, add verification code fields and code:

<div style="display: flex; clear: both">
            <input type="hidden" name="captcha_id" id="captcha_id">
            <input type="text" name="captcha" required placeholder="请填写验证码" class="layui-input" style="flex: 1">
            <img src="" id="get-captcha" style="width: 150px;height: 56px;cursor: pointer;" />
            <script>
              document.getElementById('get-captcha').addEventListener("click", function (e) {
                fetch('/api/captcha')
                        .then(response => {
                          return response.json()
                        })
                        .then(res => {
                          document.getElementById('captcha_id').setAttribute("value", res.data.captcha_id)
                          document.getElementById('get-captcha').setAttribute("src", res.data.captcha)
                        }).catch(err =>{console.log(err)})
              });
              document.getElementById('get-captcha').click();
            </script>
          </div>

If your website uses jQuery, the <script></script> part can use the jquery writing method:

<script>
              // jquery 调用方式
              $('#get-captcha').on("click", function (e) {
                $.get('/api/captcha', function(res) {
                  $('#captcha_id').attr("value", res.data.captcha_id)
                  $('#get-captcha').attr("src", res.data.captcha)
                }, 'json')
              })
              $('#get-captcha').click();
            </script>

At this point, your message or comment has enabled the verification code verification function, and users need to enter the verification code to verify when leaving a message.