即使您不尊重验证强度计，为什么还要保存新密码？

Question

我正在尝试提高我的网站和用户帐户设置的安全性。 所以我想插入一个密码强度计来给密码一个安全级别。 一切正常，但这似乎只是风格问题。

当您更改密码时，即使您不遵守强度计中规定的规则，您仍然可以清洗密码并且设置成功。

那么我该如何预防呢？ 如果您不尊重强度计，我希望不要保存设置，否则没有任何意义。

我正在使用 wordpress，但表单帐户设置属于 woocommerce。 一些好心人可以帮助我了解我做错了什么吗？ 我感谢任何帮助，谢谢。

 /* Show Hide Password */ function showPassword(targetID) { var pw = document.getElementById(targetID); if (pw.type === "password") { pw.type = "text"; } else { pw.type = "password"; } } /*Add class Active to Modifica password*/ document.getElementById('editpw').onclick = function() { this.classList.toggle('actived'); } /* Dropdown Password Field */ var dropdownBtn = document.querySelectorAll('.drop_btn'); iconDrop = null; lastOpened = null; //Add this for toggling dropdown dropdownBtn.forEach(btn => btn.addEventListener('click', function() { var dropCont = this.nextElementSibling; let icon = this.querySelector('.icon_item'); icon.classList.toggle("down"); dropCont.classList.toggle("show"); //Add this for toggling dropdown if (lastOpened && lastOpened !== dropCont) lastOpened.classList.remove("show"); lastOpened = dropCont; if (iconDrop && iconDrop !== icon) iconDrop.classList.remove("down"); iconDrop = icon; })); /*Start Password Strength Meter*/ var myInput = document.getElementById("password_1"); var letter = document.getElementById("letter"); var capital = document.getElementById("capital"); var number = document.getElementById("number"); var length = document.getElementById("length"); // When the user clicks on the password field, show the message box myInput.onfocus = function() { document.getElementById("message").style.display = "block"; } // When the user clicks outside of the password field, hide the message box myInput.onblur = function() { document.getElementById("message").style.display = "none"; } // When the user starts to type something inside the password field myInput.onkeyup = function() { // Validate lowercase letters var lowerCaseLetters = /[az]/g; if(myInput.value.match(lowerCaseLetters)) { letter.classList.remove("invalid"); letter.classList.add("valid"); } else { letter.classList.remove("valid"); letter.classList.add("invalid"); } // Validate capital letters var upperCaseLetters = /[AZ]/g; if(myInput.value.match(upperCaseLetters)) { capital.classList.remove("invalid"); capital.classList.add("valid"); } else { capital.classList.remove("valid"); capital.classList.add("invalid"); } // Validate numbers var numbers = /[0-9]/g; if(myInput.value.match(numbers)) { number.classList.remove("invalid"); number.classList.add("valid"); } else { number.classList.remove("valid"); number.classList.add("invalid"); } // Validate length if(myInput.value.length >= 8) { length.classList.remove("invalid"); length.classList.add("valid"); } else { length.classList.remove("valid"); length.classList.add("invalid"); } }

 /*Form Style*/ .form-container { display: flex; flex-direction: column; padding: 20px; border-radius: 6px; box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px; border: 1px solid var(--e-global-color-2075d85); } .box-name-surname { display: flex; gap: 20px; } .form-row { width: 100%; margin-bottom: 18px!important; } .edit-account-button { height: 30px; font-size: 14px; font-weight: 400; } fieldset { border: 0!important; margin: 0!important; padding: 5px!important; } /*Input fields*/ input.field-settings { width: 100%; border-radius: 4px!important; border: 2px solid #efefef!important; padding: 12px!important; margin-bottom: 6px; height: 15px; } input.field-settings:focus { border: 2px solid #6FA4F2!important; } input.field-settings.disabled { background: var(--e-global-color-2606bfd); color: var(--e-global-color-43596cc); } label.t2 { font-size: 14px!important; line-height: 1.5em!important; font-weight: 500!important; margin-bottom: 6px!important; display: block; } span.t4-light { margin: 0 6px; display: block; font-style: italic; } /*Toggle Password*/ .togglePw { display: none; margin-bottom: 0;} .togglePw + label:before { content: "\f06e"; font: var(--fa-font-solid); margin-bottom: 6px; margin-left: -30px; display: block; color: #8C9099; } .togglePw:checked + label:before { content: "\f070"; font: var(--fa-font-solid); margin-bottom: 6px; margin-left: -30px; display: block; color: #1E70EB; } .input-group { display: flex; align-items: center; } /*Dropdown Function Style*/ .drop_btn { display: flex; align-items: center; padding: 10px; margin-bottom: 24px; border-bottom: 1px solid #efefef; font-size: 14px; font-weight: 500; cursor: pointer; transition: 0.2s all; } .drop_btn:hover { color: #1E70EB; } .drop_btn.actived { color: #1E70EB; } .icon_item { font-family: fontAwesome; content: '\f078'; display: inline-block; position: absolute; right: 2em; margin: 0; padding: 0; transform: rotateY(0); transform-origin: center; transition: 0.1s linear; } .icon_item.down { font-family: fontAwesome; content: '\f325'; display: inline-block; position: absolute; right: 2em; margin: 0; padding: 0; transform: rotateZ(180deg); transform-origin: center; transition: 0.1s linear; } .drop_container { overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; } .drop_container.show { max-height: 900px; transition: max-height 0.3s ease-in; } .drop_container>.item { display: flex; flex-direction: column; margin-left: 10px; padding: 10px 0px 0px 0px; } /*Pasword Strength Meter*/ /* The message box is shown when the user clicks on the password field */ #message { display:none; background: #f1f1f1; color: #000; position: relative; padding: 20px; margin-top: 10px; } #message p { padding: 10px 35px; font-size: 18px; } /* Add a green text color and a checkmark when the requirements are right */ .valid { color: green; } .valid:before { position: relative; left: -35px; content: "✔"; } /* Add a red text color and an "x" when the requirements are wrong */ .invalid { color: red; } .invalid:before { position: relative; left: -35px; content: "✖"; }

 <?php defined( 'ABSPATH' ) || exit; do_action( 'woocommerce_before_edit_account_form' ); ?> <form class="form-container" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' );?> > <?php do_action( 'woocommerce_edit_account_form_start' ); ?> <div class="box-name-surname"> <p class="form-row"> <label class="t2" for="account_first_name">First Name<span class="required">*</span></label> <input type="text" class="field-settings" name="account_first_name" id="account_first_name" autocomplete="given-name" value="John" /> </p> <p class="form-row"> <label class="t2" for="account_last_name">Last Name<span class="required">*</span></label> <input type="text" class="field-settings" name="account_last_name" id="account_last_name" autocomplete="family-name" value="Doe" /> </p> </div> <div class="clear"></div> <p class="form-row"> <label class="t2" for="account_user_login">Username</label> <input type="text" class="field-settings disabled" name="account_user_login" id="account_user_login" disabled value="JohnDoeUser" /> </p> <p class="form-row"> <label class="t2" for="account_display_name">Display Name<span class="required">*</span></label> <input type="text" class="field-settings" name="account_display_name" id="account_display_name" value="John Doe" /> </p> <div class="clear"></div> <p class="form-row email"> <label class="t2" for="account_email">Email<span class="required">*</span></label> <input type="email" class="field-settings" name="account_email" id="account_email" autocomplete="email" value="JohnDoe@example.com" /> </p> <!-- Password Section --> <div id="editpw" class="drop_btn">Edit Password<i class="icon_item fa fa-angle-down"></i></div> <div class="drop_container"> <fieldset> <p class=""> <label class="t2" for="password_current">Current Password (leave blank to leave unchanged)</label> <div class="input-group"> <input type="password" class="field-settings" name="password_current" id="password_current" autocomplete="off"/> <input type="checkbox" class="togglePw" id="pw_current" onclick="showPassword('password_current')"/> <label for="pw_current" class="fa"></label> </div> </p> <p class=""> <label class="t2" for="password_1">New Password (leave blank to leave unchanged)</label> <div class="input-group"> <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" /> <input type="checkbox" class="togglePw" id="pw_1" onclick="showPassword('password_1')"/> <label for="pw_1" class="fa"></label> </div> </p> <p class=""> <label class="t2" for="password_2">Confirm Password</label> <div class="input-group"> <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" /> <input type="checkbox" class="togglePw" id="pw_2" onclick="showPassword('password_2')"/> <label for="pw_2" class="fa"></label> </div> </p> </fieldset> <div id="message"> <h3>Password must contain the following:</h3> <p id="letter" class="invalid">A <b>lowercase</b> letter</p> <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p> <p id="number" class="invalid">A <b>number</b></p> <p id="length" class="invalid">Minimum <b>8 characters</b></p> </div> </div> <div class="clear"></div> <?php do_action( 'woocommerce_edit_account_form' ); ?> <p> <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?> <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>">Save Changes</button> <input type="hidden" name="action" value="save_account_details" /> </p> <?php do_action( 'woocommerce_edit_account_form_end' ); ?> </form> <?php do_action( 'woocommerce_after_edit_account_form' ); ?>

Answer 1

在寻找解决方案几天后，我找到了一个。 我意识到 woocommerce 提供了自己的密码强度计，但我不知道它在那里。 因为它已经在那里，我已经使用了它。

密码强度计文件： https ://github.com/woocommerce/woocommerce/blob/5175a6820b1ea78160ba6dfeafa67e9a3e0a6c59/plugins/woocommerce/client/legacy/js/frontend/password-strength-meter.js

该文件的作用是禁用保存设置按钮，直到密码字段满足所有要求。 所以我通过将原始 js 代码粘贴到我的自定义 js 文件中来利用此功能。 显然，我做了一些更改，但仅更改了 CSS 类以使用我的自定义表单。 （对于那些询问的人，js 文件包含带有 css 类的 html 标签，这些标签与表单通信）。

所以最后我发现自己有：

1. form-edit-account.php (theme-child / woocommerce / myaccount)
2. form-edit-account.js (theme-child / woocommerce / myaccount / assets)
3. form-edit-account.css (theme-child / woocommerce / myaccount / assets)

所有三个文件都在我的子主题中，我已经在括号中为任何尝试这样做的人写了路径，虽然这是主观的，但这只是一个指示。

那么 password-strength-meter.js 中的内容我已粘贴到包含我的自定义 js 的 form-edit-account.js 文件中。 下面我将整个片段留给任何感兴趣的人，当然它不能在 stackoverflow 上播放，但它可以在实时网站上运行。

这是最终结果的样子：

 /* Show Hide Password */ function showPassword(targetID) { var pw = document.getElementById(targetID); if (pw.type === "password") { pw.type = "text"; } else { pw.type = "password"; } } /*Add class Active to Modifica password*/ document.getElementById('editpw').onclick = function() { this.classList.toggle('actived'); } /* Dropdown Password Field */ var dropdownBtn = document.querySelectorAll('.drop_btn'); iconDrop = null; lastOpened = null; //Add this for toggling dropdown dropdownBtn.forEach(btn => btn.addEventListener('click', function() { var dropCont = this.nextElementSibling; let icon = this.querySelector('.icon_item'); icon.classList.toggle("down"); dropCont.classList.toggle("show"); //Add this for toggling dropdown if (lastOpened && lastOpened !== dropCont) lastOpened.classList.remove("show"); lastOpened = dropCont; if (iconDrop && iconDrop !== icon) iconDrop.classList.remove("down"); iconDrop = icon; })); // Start Strength Meter Password /* global wp, pwsL10n, wc_password_strength_meter_params */ ( function( $ ) { 'use strict'; /** * Password Strength Meter class. */ var wc_password_strength_meter = { /** * Initialize strength meter actions. */ init: function() { $( document.body ) .on( 'keyup change', 'form.register #reg_password, form.checkout #account_password, ' + 'form.mts-edit-account #password_1, form.lost_reset_password #password_1', this.strengthMeter ); $( 'form.checkout #createaccount' ).trigger( 'change' ); }, /** * Strength Meter. */ strengthMeter: function() { var wrapper = $( 'form.register, form.checkout, form.mts-edit-account, form.lost_reset_password' ), submit = $( 'button[type="submit"]', wrapper ), field = $( '#reg_password, #account_password, #password_1', wrapper ), strength = 1, fieldValue = field.val(), stop_checkout = ! wrapper.is( 'form.checkout' ); // By default is disabled on checkout. wc_password_strength_meter.includeMeter( wrapper, field ); strength = wc_password_strength_meter.checkPasswordStrength( wrapper, field ); // Allow password strength meter stop checkout. if ( wc_password_strength_meter_params.stop_checkout ) { stop_checkout = true; } if ( fieldValue.length > 0 && strength < wc_password_strength_meter_params.min_password_strength && -1 !== strength && stop_checkout ) { submit.attr( 'disabled', 'disabled' ).addClass( 'disabled' ); } else { submit.prop( 'disabled', false ).removeClass( 'disabled' ); } }, /** * Include meter HTML. * * @param {Object} wrapper * @param {Object} field */ includeMeter: function( wrapper, field ) { var meter = wrapper.find( '.woocommerce-password-strength' ); if ( '' === field.val() ) { meter.hide(); $( document.body ).trigger( 'wc-password-strength-hide' ); } else if ( 0 === meter.length ) { field.after( '<div class="woocommerce-password-strength" aria-live="polite"></div>' ); $( document.body ).trigger( 'wc-password-strength-added' ); } else { meter.show(); $( document.body ).trigger( 'wc-password-strength-show' ); } }, /** * Check password strength. * * @param {Object} field * * @return {Int} */ checkPasswordStrength: function( wrapper, field ) { var meter = wrapper.find( '.woocommerce-password-strength' ), hint = wrapper.find( '.woocommerce-password-hint' ), hint_html = '<small class="woocommerce-password-hint">' + wc_password_strength_meter_params.i18n_password_hint + '</small>', strength = wp.passwordStrength.meter( field.val(), wp.passwordStrength.userInputDisallowedList() ), error = ''; // Reset. meter.removeClass( 'short bad good strong' ); hint.remove(); if ( meter.is( ':hidden' ) ) { return strength; } // Error to append if ( strength < wc_password_strength_meter_params.min_password_strength ) { error = ' - ' + wc_password_strength_meter_params.i18n_password_error; } switch ( strength ) { case 0 : meter.addClass( 'short' ).html( pwsL10n['short'] + error ); meter.after( hint_html ); break; case 1 : meter.addClass( 'bad' ).html( pwsL10n.bad + error ); meter.after( hint_html ); break; case 2 : meter.addClass( 'bad' ).html( pwsL10n.bad + error ); meter.after( hint_html ); break; case 3 : meter.addClass( 'good' ).html( pwsL10n.good + error ); break; case 4 : meter.addClass( 'strong' ).html( pwsL10n.strong + error ); break; case 5 : meter.addClass( 'short' ).html( pwsL10n.mismatch ); break; } return strength; } }; wc_password_strength_meter.init(); })( jQuery );

 /*Form Style*/ .mts-edit-account { display: flex; flex-direction: column; padding: 20px; border-radius: 6px; box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px; border: 1px solid var(--e-global-color-2075d85); } .box-name-surname { display: flex; gap: 20px; } .form-row { width: 100%; margin-bottom: 18px!important; } .edit-account-button { height: 30px; font-size: 14px; font-weight: 400; } .edit-account-button.disabled { background-color: #8C9099; } .edit-account-button.disabled:hover { background-color: #8C9099; } fieldset { border: 0!important; margin: 0!important; padding: 5px!important; } /*Input fields*/ input.field-settings { width: 100%; border-radius: 4px!important; border: 2px solid #efefef!important; padding: 12px!important; margin-bottom: 6px; height: 20px; } input.field-settings:focus { border: 2px solid #6FA4F2!important; } input.field-settings.disabled { background: var(--e-global-color-2606bfd); color: var(--e-global-color-43596cc); } label.t2 { font-size: 14px!important; line-height: 1.5em!important; font-weight: 500!important; margin-bottom: 6px!important; display: block; } span.t4-light { margin: 0 6px; display: block; } /*Toggle Password*/ .togglePw { display: none; margin-bottom: 0;} .togglePw + label:before { content: "\f06e"; font: var(--fa-font-solid); margin-bottom: 6px; margin-left: -30px; display: block; color: #8C9099; } .togglePw:checked + label:before { content: "\f070"; font: var(--fa-font-solid); margin-bottom: 6px; margin-left: -30px; display: block; color: #1E70EB; } .input-group { display: flex; align-items: center; } /*Dropdown Function Style*/ .drop_btn { display: flex; align-items: center; padding: 10px; margin-bottom: 24px; border-bottom: 1px solid #efefef; font-size: 14px; font-weight: 500; cursor: pointer; transition: 0.2s all; } .drop_btn:hover { color: #1E70EB; } .drop_btn.actived { color: #1E70EB; } .icon_item { font-family: fontAwesome; content: '\f078'; display: inline-block; position: absolute; right: 2em; margin: 0; padding: 0; transform: rotateY(0); transform-origin: center; transition: 0.1s linear; } .icon_item.down { font-family: fontAwesome; content: '\f325'; display: inline-block; position: absolute; right: 2em; margin: 0; padding: 0; transform: rotateZ(180deg); transform-origin: center; transition: 0.1s linear; } .drop_container { overflow: hidden; max-height: 0; transition: max-height 0.2s ease-out; } .drop_container.show { max-height: 900px; transition: max-height 0.3s ease-in; } .drop_container>.item { display: flex; flex-direction: column; margin-left: 10px; padding: 10px 0px 0px 0px; } /*Pasword Strength Meter*/ /* The message box is shown when the user clicks on the password field */ #message { display:none; background: #f1f1f1; color: #000; position: relative; padding: 20px; margin-top: 10px; } #message p { padding: 10px 35px; font-size: 18px; } /* Add a green text color and a checkmark when the requirements are right */ .valid { color: green; } .valid:before { position: relative; left: -35px; content: "✔"; } /* Add a red text color and an "x" when the requirements are wrong */ .invalid { color: red; } .invalid:before { position: relative; left: -35px; content: "✖"; } /*Woocommerce Password Strength Meter*/ .woocommerce-password-strength.short { background-color: #ffffff00; border-color: #ffffff00; text-align: right; color: #E11536; padding: 5px; } .woocommerce-password-strength.short:after { font-family: fontAwesome; font: var(--fa-font-solid); content: '\e368'; font-size: 18px; margin-left: 10px; } .woocommerce-password-strength.bad { background-color: #ffffff00; border-color: #ffffff00; text-align: right; color: #EA580C; padding: 5px; } .woocommerce-password-strength.bad:after { font-family: fontAwesome; font: var(--fa-font-solid); content: '\e36f'; font-size: 18px; margin-left: 10px; } .woocommerce-password-strength.good { background-color: #ffffff00; border-color: #ffffff00; text-align: right; color: #1E70EB; padding: 5px; } .woocommerce-password-strength.good:after { font-family: fontAwesome; font: var(--fa-font-solid); content: '\f11a'; font-size: 18px; margin-left: 10px; } .woocommerce-password-strength.strong { background-color: #ffffff00; border-color: #ffffff00; text-align: right; color: #00B86E; padding: 5px; } .woocommerce-password-strength.strong:after { font-family: fontAwesome; font: var(--fa-font-solid); content: '\f4da'; font-size: 18px; margin-left: 10px; } .woocommerce-password-hint { font-size: 12px; line-height: 1.5em; font-weight: 400; color: #8C9099; }

 <link rel="stylesheet" type="text/css" href="https://my-website.com/wp-content/themes/theme-child/woocommerce/myaccount/assets/form-edit-account.css?<?php $FourDigitRandomNumber = mt_rand(00000,99999); echo $FourDigitRandomNumber; ?>" /> <script src="https://my-website.com/wp-content/themes/theme-child/woocommerce/myaccount/assets/form-edit-account.js?<?php $FourDigitRandomNumber = mt_rand(00000,99999); echo $FourDigitRandomNumber; ?>" defer=""></script> <form class="mts-edit-account" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' );?> > <?php do_action( 'woocommerce_edit_account_form_start' ); ?> <div class="box-name-surname"> <p class="form-row"> <label class="t2" for="account_first_name">First Name<span class="required">*</span></label> <input type="text" class="field-settings" name="account_first_name" id="account_first_name" autocomplete="given-name" value="John"/> </p> <p class="form-row"> <label class="t2" for="account_last_name">Last Name<span class="required">*</span></label> <input type="text" class="field-settings" name="account_last_name" id="account_last_name" autocomplete="family-name" value="Doe" /> </p> </div> <div class="clear"></div> <p class="form-row"> <label class="t2" for="account_user_login">Username</label> <input type="text" class="field-settings disabled" name="account_user_login" id="account_user_login" disabled value="JohnDoe" /> <span class="t4-light">Description here</span> </p> <p class="form-row"> <label class="t2" for="account_display_name">Display Name<span class="required">*</span></label> <input type="text" class="field-settings" name="account_display_name" id="account_display_name" value="JohnDoe" /> <span class="t4-light">This will be how your name will be displayed in the account section and in reviews</span> </p> <div class="clear"></div> <p class="form-row email"> <label class="t2" for="account_email">Email address<span class="required">*</span></label> <input type="email" class="field-settings" name="account_email" id="account_email" autocomplete="email" value="JohnDoe@example.com" /> </p> <!-- Password Section --> <div id="editpw" class="drop_btn">Modifica Password<i class="icon_item fa fa-angle-down"></i></div> <div class="drop_container"> <fieldset> <p> <label class="t2" for="password_current">Current password (leave blank to leave unchanged)</label> <div class="input-group"> <input type="password" class="field-settings" name="password_current" id="password_current" autocomplete="off"/> <input type="checkbox" class="togglePw" id="pw_current" onclick="showPassword('password_current')"/> <label for="pw_current" class="fa"></label> </div> </p> <p> <label class="t2" for="password_1">New password (leave blank to leave unchanged)</label> <div class="input-group"> <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off"/> <input type="checkbox" class="togglePw" id="pw_1" onclick="showPassword('password_1')"/> <label for="pw_1" class="fa"></label> </div> <div class="woocommerce-password-strength"></div> </p> <p> <label class="t2" for="password_2">Confirm new password</label> <div class="input-group"> <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" /> <input type="checkbox" class="togglePw" id="pw_2" onclick="showPassword('password_2')"/> <label for="pw_2" class="fa"></label> </div> </p> </fieldset> </div> <div class="clear"></div> <?php do_action( 'woocommerce_edit_account_form' ); ?> <p> <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?> <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Salva modifiche', 'woocommerce' ); ?></button> <input type="hidden" name="action" value="save_account_details" /> </p> <?php do_action( 'woocommerce_edit_account_form_end' ); ?> </form> <?php do_action( 'woocommerce_after_edit_account_form' ); ?>