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.