WordPress教程 用户注册输入密码自动检测密码强度纯代码实现

2024-10-07 0 503

前言:

在 WordPress 的标准注册流程中,用户在注册时仅需提供用户名和电子邮箱地址,而密码则通过发送的密码重置链接来设置。以下是一段优化后的代码,它允许用户在注册时直接输入密码,并自动生成一个随机密码,同时检测密码的强度,给予用户选择使用随机密码或自行输入密码的自由。

**WordPress 注册时直接输入密码并检测密码强度**

要实现这一功能,您需要将以下代码添加到您当前主题的`functions.php`文件中:


// 添加输入密码表单
add_action( 'register_form', function () { ?>
	<div class="user-pass1-wrap">
		<p>
			<label for="pass1"><?php _e( 'Password' ); ?></label>
		</p>
 
		<div class="wp-pwd">
			<input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
			<button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
				<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
			</button>
			<div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
		</div>
		<div class="pw-weak">
			<input type="checkbox" name="pw_weak" id="pw-weak" class="pw-checkbox" />
			<label for="pw-weak"><?php _e( 'Confirm use of weak password' ); ?></label>
		</div>
	</div>
		<p class="user-pass2-wrap">
			<label for="pass2"><?php _e( 'Confirm new password' ); ?></label>
			<input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
		</p>
		<p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    <?php
});
 
// 加载验证 JS
add_action( 'login_enqueue_scripts', function () {
	if ( is_on_registration_page() && !wp_script_is( 'user-profile' ) ) {
		wp_enqueue_script('user-profile');
	}
});
 
// 验证
function is_on_registration_page() {
	return $GLOBALS['pagenow'] == 'wp-login.php' && isset( $_REQUEST['action'] ) && $_REQUEST['action'] == 'register';
}
 
// 错误提示
add_filter( 'registration_errors', function ( $errors ) {
	if ( empty( $_POST['pass1'] ) ) {
		$errors->add( 'password-required', '<strong>Error</strong>: Please enter a password.' );
	}
 
	if ( empty( $_POST['pass2'] ) ) {
		$errors->add( 'password-required', '<strong>Error</strong>: Please enter a password confirmation.' );
	}
 
	return $errors;
});
 
 
// 生成随机密码
add_filter( 'random_password', function ( $password ) {
	if ( is_on_registration_page() && ! empty( $_POST['pass1'] ) ) {
		$password = $_POST['pass1'];
	}
 
	return $password;
});
 
// 自定义邮件内容
add_filter( 'wp_new_user_notification_email', function ( $wp_new_user_notification_email, $user ) {
	$message = sprintf( __( 'Username: %s' ), $user->user_login ) . "\r\n\r\n";
	$message .= __( 'Password: As entered during your registration' ) . "\r\n\r\n";
	$message .= wp_login_url() . "\r\n";
 
	$wp_new_user_notification_email['message'] = $message;
 
	return $wp_new_user_notification_email;
}, 10, 2 );

如果用户设置的密码强度不足,系统会提示他们勾选“确认使用弱密码”选项,否则注册按钮将保持灰色,无法点击。

**同时在默认注册页面和前端注册表单中应用密码强度检测**

若您希望在 WordPress 的默认注册页面和前端注册表单中都应用这一密码强度检测功能,您需要额外添加以下代码:


// 在前端加载验证 JS
add_action( 'wp_footer', function () {
	if ( !wp_script_is( 'user-profile' ) ) {
		wp_enqueue_script('user-profile');
	}
});

并在按钮HTML 代码中添加:id="wp-submit"

本文章已结束,如转载请注明:汇站网 » WordPress 教程 用户注册输入密码自动检测密码强度纯代码实现

收藏 (0)

微信支付 微信扫一扫

支付宝支付 支付宝扫一扫

打赏二维码
点赞 (0)

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务