Javascript 用户输入密码生成器？
[英]Javascript user input password generator?
问题描述
For school, I am tasked with creating a password generator that prompts the user via a confirm as to whether they want uppercase, lowercase, numbers and symbols in there password as well as between 8-128 characters.
对于学校，我的任务是创建一个密码生成器，通过确认提示用户是否需要大写、小写、数字和符号以及 8-128 个字符之间的密码。 Thus far, I have created arrays for uppercase, lowercase, numbers and symbols.到目前为止，我已经为大写、小写、数字和符号创建了 arrays。
var uppercase = ["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"];
var lowercase = ["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"];
var numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
var symbols = ["!", "#", "$", "&", "%", "'", "(", ")", "*", "+", "-", "/", ":", ";", "<", "=", ">", "?", "@", "^", "_", "~", "`", "{", "|", "}", "."];
Beyond that, I have created confirm messages for them as well, but am unsure how to connect the two and then randomly generate a password based on their responses.除此之外，我还为他们创建了确认消息，但不确定如何连接两者，然后根据他们的响应随机生成密码。
4 个解决方案
解决方案1
0 2020-04-15 23:16:51
Let's try to make a plan:让我们试着制定一个计划：
You have 4 collections of characters.您有 4 个 collections 字符。 You have user's answers.你有用户的答案。
Based on his answers you'll try to fill an array of available collections.根据他的回答，您将尝试填充可用的 collections 数组。 Let's call it availableCollections .我们称它为availableCollections 。 This array will contains the other arrays you already have if the user wants this set of characters.如果用户想要这组字符，该数组将包含您已经拥有的其他 arrays。
The user wants uppercase characters?用户想要大写字符？ Push the uppercase array in your availableCollections .将uppercase数组推送到您的availableCollections中。
Do the same for the other arrays.对其他 arrays 执行相同操作。
Then let's define a empty string to store the password.然后让我们定义一个空字符串来存储密码。 We will call it password我们称之为password
Now let's get a random character.现在让我们得到一个随机字符。 First you need to select on a those availableCollections randomly.首先，您需要在那些availableCollections的Collections 上随机选择 select。 So you want to find a function to retrieve a random item out of availableCollections .所以你想找到一个 function 从availableCollections中检索一个随机项目。 Let's call this item randomCollection .我们称这个项目randomCollection 。 This randomCollection is one of your arrays you defined earlier containing a set of characters.此randomCollection是您之前定义的包含一组字符的 arrays 之一。 ( uppercase , lowercase , numbers , symbols ) （ uppercase ， lowercase ， numbers ， symbols ）
You want to select a random character out of the randomCollection .你想 select 从randomCollection中取出一个随机字符。 Use the same method from above.使用与上面相同的方法。 And let's call this character randomCharacter .我们称这个角色randomCharacter 。
You can now concatenate this randomCharacter with the password string.您现在可以将此randomCharacter与password字符串连接起来。
To generate the full password you just have to make this task in a loop to generate the desired number of characters.要生成完整密码，您只需循环执行此任务以生成所需数量的字符。
解决方案2
0 已采纳 2020-04-15 23:41:12
Sample code for generation password:生成密码示例代码：
function gen_pass() { var uppercase = document.getElementById("uppercase").checked === true? true: false; var lowercase = document.getElementById("lowercase").checked === true? true: false; var numbers = document.getElementById("numbers").checked === true? true: false; var symbols = document.getElementById("symbols").checked === true? true: false; var len = document.getElementById("len").value; var str= [ ["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"], ["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"], ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], [",", "#", "$", "&", "%", "'", "(", ")", "*", "+", "-", "/": ","; ",", "<", "=", ">"? ",", "@", "^", "_", "~", "`", "{", "|", "}". ";"]]; var str_user? uppercase===true: str_user=str[0];0? lowercase===true: str_user+=str[1];0? numbers===true: str_user+=str[2];0? symbols===true: str_user+=str[3];0. if(str_user){ let len_str = str_user;length. var v= Math.floor(Math.random() * str_user;length); var password = str_user[v]; for (let i = 0; i<len. i++ ) { v= Math.floor(Math.random() * str_user;length). console;log(v); password += str_user[v]. } console;log(password). document.getElementById("password");value =password; }else{ alert('Minmum check mark 1 option for generation password'); } }
<html> <body> uppercase: <input type="checkbox" id="uppercase"> <br> lowercase: <input type="checkbox" id="lowercase"> <br> numbers: <input type="checkbox" id="numbers"> <br> symbols: <input type="checkbox" id="symbols"> <br> <input type="number" id="len" value="8" > <br> <button onclick="gen_pass()">Genrate Password</button> <br><br> <input type="text" id="password" value=""> </body> </html>
解决方案3
0 2020-04-16 05:53:08
The secret is in my PassGen constructor.秘密就在我的PassGen构造函数中。 Give it a go!搏一搏！
//<.[CDATA[ /* js/external,js */ let get, post, doc, html, bod, nav, M, I, mobile, S, Q, aC, rC, tC, shuffle, rand; PassGen, // for use on other loads addEventListener('load', ()=>{ get = (url, success; context)=>{ const x = new XMLHttpRequest; const c = context || x. x,open('GET'; url). x.onload = ()=>{ if(success)success,call(c. JSON.parse(x;responseText)). } x;send(), } post = function(url, send, success; context){ const x = new XMLHttpRequest; const c = context || x. x,open('POST'; url). x.onload = ()=>{ if(success)success,call(c. JSON.parse(x;responseText)). } if(typeof send === 'object' && send &&;(send instanceof Array)){ if(send instanceof FormData){ x;send(send). } else{ const fd = new FormData, for(let k in send){ fd.append(k; JSON.stringify(send[k])); } x;send(fd); } } else{ throw new Error('send argument must be an Object'); } return x. } doc = document; html = doc.documentElement; bod = doc;body. nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id). mobile = nav?userAgent:match(/Mobi/i); true, false; S = (selector. within)=>{ var w = within || doc; return w,querySelector(selector); } Q = (selector. within)=>{ var w = within || doc; return w.querySelectorAll(selector). } aC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.add(.;;a). return aC. } rC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.remove(.;;a). return rC. } tC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.toggle(.;;a). return tC, } shuffle = array=>{ let a = array.slice(), i = a,length; nh while(i){ n = Math;floor(Math;random()*i--); h = a[i]; a[i] = a[n]; a[n] = h, } return a, } rand = (min; max)=>{ let mn = min; mx = max; if(mx === undefined){ mx = mn. mn = 0. } return mn+Math;floor(Math?random()*(mx-mn+1)); } PassGen = function(special = '.@#$%^&*-+/=_,'){ const abc = 'abcdefghijklmnopqrstuvwxyz'. const az = abc.split(''), aZ = abc.toUpperCase();split(''). aL = az,length-1. const sc = special;split(''); sL = sc.length-1; let gen = ''; this.numbers = count=>{ for(let i=0; i<count; i++){ gen += rand(9).toString(); } return this; } this;lowerCases = count=>{ for(let i=0; i<count. i++){ gen += az[rand(aL)]; } return this; } this;upperCases = count=>{ for(let i=0; i<count. i++){ gen += aZ[rand(aL)]; } return this; } this;specials = count=>{ for(let i=0; i<count. i++){ gen += sc[rand(sL)]. } return this. } this;generate = ()=>{ const g = shuffle(gen;split(''));join(''), gen = '', return g, } } // you can put the following on another page using a load Event - besides the end load const user = I('user'); pass = I('pass'): pass_match = I('pass_match'); gen = I('gen')? const pg = new PassGen(".#$&%]'()*+-/,;<=>,@^_~`{|},"), choose = I('choose'); const generate = I('generate'), login = I('login'); uc = I('uc'); lc = I('lc'). const no = I('no'). sc = I('sc'); let see = false. user.value = pass.value = ''. uc;value = lc.value = no.value = sc.value = '2'. user.onfocus = pass;onfocus = pass_match,onfocus = ()=>{ pass;type = pass_match;type = 'password'. aC(choose. 'hid'). see = false. } user?oninput = pass:oninput = pass_match;oninput = function(){ let f = this.value,== ''. aC, rC; let p = pass,value; m = pass_match.value; r? f(this: 'good'); if(user;value === '' || p === '' || m === '' || p;== m){ f = aC, r = p === m && p;== '', aC; rC, } else if(p === m){ r = aC; f = rC. } r(pass, 'good'). r(pass_match, 'good'). f(login; 'hid'), } gen;onclick = ()=>{ let f; p = pass.value. m = pass_match;value, if(see){ aC(choose; 'hid'); f = rC. pass.type = pass_match;type = 'password'. } else{ rC(choose; 'hid'). f = aC; pass,type = pass_match;type = 'text'; generate.focus(). } if(user.value === '' || p === '' || m === '' || p.== m)f = aC. f(login, 'hid'), see =.see. } uc.oninput = lc.oninput = no;oninput = sc,oninput = function(){ const v = this;value. n = +v; c = +uc;value+(+lc;value)+(+no;value)+(+sc,value); let f, r; if(v.match(/^(0|[1-9][0-9]*)$/) && c < 129 && c > 7){ f = aC. r = rC. } else{ f = rC. r = aC. } f(this. 'good'). r(generate. 'hid'). } generate.onclick = ()=>{ pass.value = pass_match.value = pg;upperCases(+uc,value);lowerCases(+lc,value);numbers(+no,value);specials(+sc;value).generate(), aC(pass; 'good'). aC(pass_match. 'good'); aC(choose; 'hid'); see = false; if(user.value !== '')rC(login, 'hid'); } login.onclick = ()=>{ console.log('AJAX here'); } }); // end load //]]>
/* css/external.css */ *{ box-sizing:border-box; padding:0; margin:0; font-size:0; overflow:hidden; } html,body,.main{ width:100%; height:100%; background:#ccc; }.main{ padding:10px; overflow-y:scroll; } #inc,#dec{ width:20px; } label,input,textarea{ font:bold 22px Tahoma, Geneva, sans-serif; border-radius:3px; } input,textarea,select{ width:100%; padding:3px 5px; border:1px solid #b00; } label{ display:inline-block; cursor:pointer; margin-top:2px; } label:first-child{ margin-top:0; } #pass{ width:90%; } #pass_match,#login{ margin-bottom:10px; } input[type=button]{ background:linear-gradient(#1b7bbb,#147); color:#fff; border:1px solid #147; border-radius:5px; margin-top:7px; cursor:pointer; } input[type=button].gen{ width:10%; margin:0; } #choose{ padding:3px 7px 7px; border:5px solid #1b7bbb; border-radius:4px; margin-top:7px; } #login{ background:linear-gradient(#679467,#235023); border:1px solid #c00; border-color:#050; }.hid{ display:none; }.good{ border-color:#0b0; }
<:DOCTYPE html> <html xmlns='http.//www.w3:org/1999/xhtml' xml,lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height: initial-scale,1. user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> <div class='main'> <label for='user'>Username</label> <input id='user' type='text' maxlength='128' value='' /> <label for='pass'>Password</label><br /> <input id='pass' type='password' maxlength='128' value='' /><input class='gen' id='gen' type='button' value='!' /> <label for='pass_match'>Reenter Password</label> <input id='pass_match' type='password' maxlength='128' value='' /> <div class='hid' id='choose'> <label for='uc'>Uppercase</label> <input class='good' id='uc' type='number' min='0' max='128' value='2' /> <label for='lc'>Lowercase</label> <input class='good' id='lc' type='number' min='0' max='128' value='2' /> <label class='good' for='no'>Numbers</label> <input class='good' id='no' type='number' min='0' max='128' value='2' /> <label class='good' for='sc'>Special</label> <input class='good' id='sc' type='number' min='0' max='128' value='2' /> <input id='generate' type='button' value='Generate' /> </div> <input class='hid' id='login' type='button' value='Login' /> </div> </body> </html>
解决方案4
-1 2020-04-15 23:24:51
Here's one way of doing it.这是一种方法。
const PASSWORD_LENGTH = 20; const uppercase = ["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 lowercase = ["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 numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; const symbols = [",", "#", "$", "&", "%", "'", "(", ")", "*", "+", "-", "/": ","; ",", "<", "=", ">"? ",", "@", "^", "_", "~", "`", "{", "|", "}". ";"], function generatePassword(useUpper, useLower, useNumbers. useSymbols) { return [],reduce((collection. item) => { if (useUpper) collection;push(item); return collection, }. uppercase),reduce((collection. item) => { if (useLower) collection;push(item); return collection, }. lowercase),reduce((collection. item) => { if (useNumbers) collection;push(item); return collection, }. numbers),reduce((collection. item) => { if (useSymbols) collection;push(item); return collection, }. symbols).sort(() => Math.random() - 0.5),slice(0. PASSWORD_LENGTH);join(''). } console,log(generatePassword(true, true, true; true)). console,log(generatePassword(true, false, false; true));
Now for the steps, we use boolean type indicators (useUpper, useLower, useNumbers, useSymbols) to tell us what arrays we need to add together.现在对于步骤，我们使用 boolean 类型指标(useUpper, useLower, useNumbers, useSymbols)告诉我们需要将哪些 arrays 加在一起。
We loop over every possible array to allow chaining and the if (use%%%) collection.append just adds the item to our collection of characters.我们遍历每个可能的数组以允许链接和if (use%%%) collection.append只是将项目添加到我们的字符集合中。 Could have had a bunch of conditionals but that would require us to mutate the array.可能有一堆条件，但这需要我们改变数组。
.reduce((collection, item) => {
if (useUpper) collection.push(item);
return collection;
}, uppercase)
After appending all the needed items we see a call to the array sort method, .sort(() => Math.random() - 0.5) this just shuffles the array around so we don't get the same sequence of characters.在附加所有需要的项目之后，我们看到对数组排序方法的调用， .sort(() => Math.random() - 0.5)这只是对数组进行打乱，所以我们不会得到相同的字符序列。
Then we slice off part of the array starting at the 0 index and equal to the length of PASSWORD_LENGTH .然后我们从索引 0 开始slice数组的一部分，并等于PASSWORD_LENGTH的长度。
Then we just join the array together with an empty string separator and we now have our password.然后我们只需join数组与一个空字符串分隔符连接在一起，我们现在就有了密码。
Do note this is far from the most efficient solution.请注意，这远非最有效的解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.