JavaScript密码生成器用户prompt输入校验与功能集成问题

解决方案 #

核心修改说明 #

• 封装了可复用的getYesNoAnswer函数，自动循环校验用户输入，仅当输入不区分大小写的yes/no时才返回结果，符合你要求的文本输入交互逻辑
• 你设计的choseNo空数组配置可正常达到预期效果，未选中的字符集会被后续的flat()方法自动过滤，不参与密码生成
• 新增了「至少选中1种字符类型」的校验，避免无有效字符集导致的生成异常
• 修正了生成密码时的传参错误，原代码固定传入全量字符集，修改后传入用户实际选择的字符集数组
• 补全了特殊字符、大小写字母的选择逻辑，和数字选择规则完全一致

完整可运行代码 #

// Assignment Code
var generateBtn = document.querySelector("#generate");

const allowedDigits = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; 
const allowedUpperCase = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
const allowedLowerCase = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
const allowedSpecial = ['!', '@' , '#', '$', '%', '^', '&', '*', '?'];
const choseNo = [];

// 通用yes/no输入校验函数
function getYesNoAnswer(questionText) {
  let answer;
  while(true) {
    answer = window.prompt(questionText)?.trim().toLowerCase();
    if(answer === 'yes' || answer === 'no') {
      return answer;
    }
    alert('输入无效，请输入yes或者no（不区分大小写）');
  }
}

function getRandomCharacter(array) {
  return array[Math.floor(Math.random() * array.length)];
}


function generatePassword(length, allowedCharacterSets) {
  var password = "";
  // 先保证每个选中的字符集至少出现一次
  for(let i = 0; i < allowedCharacterSets.length; ++i) {
    password += getRandomCharacter(allowedCharacterSets[i]);
  }
  const UNIVERSAL_CHARACTER_SET = allowedCharacterSets.flat();
  // 补全剩余长度的字符
  for (let i = password.length;  i < length; ++i) {
    password += getRandomCharacter(UNIVERSAL_CHARACTER_SET);
  }
  return password; 
}


// Write password to the #password input
function writePassword() {
  // 密码长度校验逻辑和原逻辑一致
  let isValidLength = false;
  let promptText = "请设置密码长度，需在8-128个字符之间"
  while (!isValidLength){
    var length = window.prompt(promptText);
    const numLength = parseInt(length);
    if (!isNaN(numLength)){
         if (numLength >= 8 && numLength <= 128){
           length = numLength;
           isValidLength = true;
         } else {
             promptText = '输入无效，请输入8到128之间的数字';
         }
    }
  }

  // 逐个获取用户对字符类型的选择
  const useDigits = getYesNoAnswer("是否需要包含数字？请输入yes或no") === 'yes' ? allowedDigits : choseNo;
  const useSpec = getYesNoAnswer("是否需要包含特殊字符？请输入yes或no") === 'yes' ? allowedSpecial : choseNo;
  const useLower = getYesNoAnswer("是否需要包含小写字母？请输入yes或no") === 'yes' ? allowedLowerCase : choseNo;
  const useUpper = getYesNoAnswer("是否需要包含大写字母？请输入yes或no") === 'yes' ? allowedUpperCase : choseNo;

  // 校验至少选中一种字符类型
  const selectedSets = [useDigits, useSpec, useLower, useUpper].filter(set => set.length > 0);
  if(selectedSets.length === 0) {
    alert('至少需要选择一种字符类型，请重新操作');
    return;
  }

  // 生成密码并写入页面
  var password = generatePassword(length, selectedSets);
  var passwordText = document.querySelector("#password");
  passwordText.value = password;
}

// Add event listener to generate button
generateBtn.addEventListener("click", writePassword);

关键逻辑验证 #

• 输入非yes/no的内容时会自动弹出错误提示并重新提问，符合需求
• 未选中的字符类型不会出现在最终生成的密码中
• 生成的密码会优先保证每个选中的字符类型至少出现一次，符合密码安全通用要求

内容的提问来源于stack exchange，提问作者Mtysver