整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給大家介紹一個非常好用的前端插件jQuery UI。
jQuery UI是以 jQuery 為基礎的開源 JavaScript 網頁用戶界面代碼庫。包含底層用戶交互、動畫、特效和可更換主題的可視控件。
下面是一個以jQuery UI實現的彈出登錄框功能，代碼非常簡單。
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/jquery-ui.css">
</head>
<body>
<h1>jQueryUI：Widgets —— Dialog</h1>
<h3>彈出式對話框</h3>
<a id="btn-login" class="btn btn-success" href="#">我要登錄</a>
<div id="dialog-login" title="用戶登錄">
<form action="">
用戶名：<input type="text"><br>
密碼名：<input type="password"><br>
</form>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="JS/jquery-ui.js"></script>
<script>
var $dialog=$("#dialog-login")
$dialog.dialog({
autoOpen:false,
modal:false,
show:{effect:"blind",duration:1000},
hide:{effect:"explode",duration:1000},
buttons:{
"登錄":()=>setTimeout(()=>{
alert("登錄成功");
$dialog.dialog("close");
},1000),
"取消":()=>$dialog.dialog("close")
},
close(){
$("form").get(0).reset()
}
});
$("#btn-login").click(()=>{
$dialog.dialog("open")
})
</script>
</body>
</html>
立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>登錄界面中我們經常會遇到需要校驗驗證碼才能登錄，驗證碼是由一串隨機產生的字母、數字或符號組成。目的是為了防止用戶利用機器人自動注冊、惡意登錄、刷票灌水等操作，驗證碼技術可以適當的提高服務的安全性，提升用戶體驗。常見的驗證碼有隨機字符、漢字圖片、字符圖片、算術、問答、滑塊、坐標、旋轉、滑動拼圖、文字點選、圖標點選、推理拼圖、語序點選、空間推理、短信、語音、智能無感知等驗證方式，最簡單的應該是隨機字符驗證了（安全級別最低！）。
在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實戰技巧可以參考以下專欄：
為了方便學習，下面附上本文用到的源碼：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
