Javascript 用户输入密码生成器？
[英]Javascript user input password generator?
问题描述
对于学校，我的任务是创建一个密码生成器，通过确认提示用户是否需要大写、小写、数字和符号以及 8-128 个字符之间的密码。 到目前为止，我已经为大写、小写、数字和符号创建了 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 = ["!", "#", "$", "&", "%", "'", "(", ")", "*", "+", "-", "/", ":", ";", "<", "=", ">", "?", "@", "^", "_", "~", "`", "{", "|", "}", "."];
除此之外，我还为他们创建了确认消息，但不确定如何连接两者，然后根据他们的响应随机生成密码。
4 个解决方案
解决方案1
0 2020-04-15 23:16:51
让我们试着制定一个计划：
您有 4 个 collections 字符。 你有用户的答案。
根据他的回答，您将尝试填充可用的 collections 数组。 我们称它为availableCollections 。 如果用户想要这组字符，该数组将包含您已经拥有的其他 arrays。
用户想要大写字符？ 将uppercase数组推送到您的availableCollections中。
对其他 arrays 执行相同操作。
然后让我们定义一个空字符串来存储密码。 我们称之为password
现在让我们得到一个随机字符。 首先，您需要在那些availableCollections的Collections 上随机选择 select。 所以你想找到一个 function 从availableCollections中检索一个随机项目。 我们称这个项目randomCollection 。 此randomCollection是您之前定义的包含一组字符的 arrays 之一。 （ uppercase ， lowercase ， numbers ， symbols ）
你想 select 从randomCollection中取出一个随机字符。 使用与上面相同的方法。 我们称这个角色randomCharacter 。
您现在可以将此randomCharacter与password字符串连接起来。
要生成完整密码，您只需循环执行此任务以生成所需数量的字符。
解决方案2
0 已采纳 2020-04-15 23:41:12
生成密码示例代码：
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
秘密就在我的PassGen构造函数中。 搏一搏！
//<.[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
这是一种方法。
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));
现在对于步骤，我们使用 boolean 类型指标(useUpper, useLower, useNumbers, useSymbols)告诉我们需要将哪些 arrays 加在一起。
我们遍历每个可能的数组以允许链接和if (use%%%) collection.append只是将项目添加到我们的字符集合中。 可能有一堆条件，但这需要我们改变数组。
.reduce((collection, item) => {
if (useUpper) collection.push(item);
return collection;
}, uppercase)
在附加所有需要的项目之后，我们看到对数组排序方法的调用， .sort(() => Math.random() - 0.5)这只是对数组进行打乱，所以我们不会得到相同的字符序列。
然后我们从索引 0 开始slice数组的一部分，并等于PASSWORD_LENGTH的长度。
然后我们只需join数组与一个空字符串分隔符连接在一起，我们现在就有了密码。
请注意，这远非最有效的解决方案。
javascript密码生成器不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.