立WordPress登录表单一般有两种实现方式，一种是建立登录页面+表单，一种是直接使用弹出窗口+表单。今天我介绍下非插件方式制作一个WordPress弹窗的登录表单，这种方法的好处就是在当前页面登录，无需跳转页面。

登录表单比较核心的函数是wp_login_form()，就利用其来实现。在functions.php中加入：

<?php
/**
 * Customizing the Login Form.
 * https://codex.wordpress.org/Customizing_the_Login_Form
 */
if ( ! is_user_logged_in() ) {?>
 
  <!-- Login modal START -->
  <div class="modal fade" id="modalLoginForm" tabindex="-1" aria-labelledby="modalLoginFormLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="modalLoginFormLabel">登录</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <?php
        // Display WordPress login form:
        $args=array(
          'form_id'=> 'loginForm',
          'label_username'=> __( '用户名或电子邮箱地址' ),
          'label_password'=> __( '密码' ),
          'label_remember'=> __( '记住我' ),
          'label_log_in'=> __( '登录' ),
          'remember'=> true
        );
        wp_login_form( $args );?>
        <p class="px-3 mb-1"><a href="javascript：;">注册</a> | <a href="<?php echo esc_url( wp_lostpassword_url( $currentUri ) ); ?>"><?php esc_html_e( '忘记密码？', 'jet-x' ); ?></a></p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
      </div>
    </div>
    </div>
  </div>
  <!-- Login modal END -->
 
<?php }?>

使用的是Bootstrap 5 的Modal弹窗样式，需要确定你的主题是否引入了Bootstrap。

制作一个按钮点击时弹出窗口：

<button type="button" id="loginUrl" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#modalLoginForm">登录</button>

登录界面中我们经常会遇到需要校验验证码才能登录，验证码是由一串随机产生的字母、数字或符号组成。目的是为了防止用户利用机器人自动注册、恶意登录、刷票灌水等操作，验证码技术可以适当的提高服务的安全性，提升用户体验。常见的验证码有随机字符、汉字图片、字符图片、算术、问答、滑块、坐标、旋转、滑动拼图、文字点选、图标点选、推理拼图、语序点选、空间推理、短信、语音、智能无感知等验证方式，最简单的应该是随机字符验证了（安全级别最低！）。

HTML模板构建

在template模板中绑定一个动态的style样式，利用check来改变图标的颜色提示用户验证码输入正确，如果验证码错误则利用message弹出警示框提示。点击验证码位置触发refreshCode重新调用createCode来刷新验证码，handleLogin为键盘事件触发登录。

最简单的验证码

利用Math.random()随机生成一个0-1之间的随机double值，根据random随机数组中的数据随机出索引值，再通过索引值获取到对应的随机值。随机的长度通过len来限制，将每次随机出的数据追加到code中即可得到随机的验证码。

验证码效验

这里不能通过el-form中的rules来校验验证码的正确与否，因为在data中定义checkCode 无法获取到this.createdCode值（undefined）。这里我们利用el-input的blur失去焦点事件来触发验证，如果你想在用户输入的时候就验证可以使用input事件在Input值改变时触发。

总结：

这里只是一个简单的验证逻辑，真正的应用上随机字符基本不会被使用。因为随机字符验证安全性太低了，模拟操作可以很容易的通过DOM获取到相应的验证码。以上内容是小编给大家分享的【Vue实战089：最简单的登录验证码功能实现】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考以下专栏：

为了方便学习，下面附上本文用到的源码：