Javascript pw生成器 - 密码长度不正确

时间：2018-04-21 14:25:00

标签： javascript checkbox

警告：我是一名JS新手。

我正在尝试使用复选框创建自己的密码生成器来控制选择中包含的字符组。

我从大约6年前在网上找到的一个脚本（不记得在哪里）开始，在w3schools过去3天后，我尝试结合一些不同的例子来提出（大多数）工作原型。 / p>

除此之外，还有一种奇怪的行为，如果选中所有复选框，则密码长度符合预期。但是，如果选择的复选框少于所有复选框，则密码长度为0到最大字符长度。

无论选择的复选框数量是多少（一个或多个），预期结果都是，生成的密码长度应与从下拉列表中选择的数字相同。

有人可以就如何达到预期结果提出一些建议吗？

谢谢。

原创（差不多）： 

function randomPassword(length) {
    var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()[]{}";
    var pass = "";
    for (var x = 0; x < length; x++) {
        var i = Math.floor(Math.random() * 76);
        pass += chars.charAt(i);
    }
    return pass;
}

function formSubmit() {
    passform.passbox.value = randomPassword(passform.length.value);
    return false;
}
html, body {
  height: auto;
  min-height: 100%;
  margin: 0 auto;
  border: 0;
  padding: 0;
  text-align: center;
}

table {
  background-color: #cc66cc;
  border: 5px dashed #00f;
  margin: 0 auto;
}
<!DOCTYPE html>
    <html lang="en">
    	<body>
    		<table>
    			<tr>
    				<td valign="middle" align="center">
    					<form name="passform">
    						<p>
    							<select name="length">
    							<option value="1">01</option>	<option value="2">02</option>	<option value="3">03</option>
    							<option value="4">04</option>	<option value="5">05</option>	<option value="6">06</option>
    							<option value="7">07</option>	<option value="8">08</option>	<option value="9">09</option>
    							<option value="10">10</option>	<option value="11">11</option>	<option value="12">12</option>
    							<option value="13">13</option>	<option value="14">14</option>	<option value="15">15</option>
    							<option value="16">16</option>	<option value="17">17</option>	<option value="18">18</option>
    							<option value="19">19</option>	<option value="20">20</option>	<option value="21">21</option>
    							<option value="22">22</option>	<option value="23">23</option>	<option value="24">24</option>
    							<option value="25">25</option>	<option value="26">26</option>	<option value="27">27</option>
    							<option value="28">28</option>	<option value="29">29</option>	<option value="30">30</option>
    							</select>
    						</p>
    						<p>
    							<input name="passbox" type="text" size="100" tabindex="1" style="padding-left: 5px;">
    						</p>
    
    						<p>
    							<input type="button" value="Generate" onClick="javascript:formSubmit()" tabindex="2">
    							<input type="reset" value="Clear" tabindex="3">
    						</p>
    					</form>
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>

新版本： 

function ranPass1(length) {
    var lower = "";
    var upper = "";
    var number = "";
    var spec1 = "";
    var spec2 = "";
    var spec3 = "";
    var chars1 = "";
    var pass1 = "";
    if (lowercheck.checked == true) {
        lower = "abcdefghijklmnopqrstuvwxyz";
        chars1 = chars1.concat(lower);
    }
    if (uppercheck.checked == true) {
        upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        chars1 = chars1.concat(upper);
    }
    if (numbercheck.checked == true) {
        number = "0123456789";
        chars1 = chars1.concat(number);
    }
    if (spec1check.checked == true) {
        spec1 = "!@#$%^&*|?";
        chars1 = chars1.concat(spec1);
    }
    if (spec2check.checked == true) {
        spec2 = "`~.,;:-_";
        chars1 = chars1.concat(spec2);
    }
    if (spec3check.checked == true) {
        spec3 = "()[]{}\<\>";
        chars1 = chars1.concat(spec3);
    }

    for(var x1 = 0; x1 < length; x1++) {
        var i1 = Math.floor(Math.random() * 71);
        pass1 += chars1.charAt(i1);
    }
    return pass1;
}

function formSubmit1()
{
    passform1.passbox1.value = ranPass1(passform1.length.value);
    return false;
}
* {
  margin: 0;
  border: 0;
  padding: 0;
  color: #000;
  box-size: border-box;
}

html, body {
  height: auto;
  min-height: 100%;
  text-align: center;
  font: normal normal 17px/17px serif;
}

.box {
  background-color: #ccf;
  border: 1px solid #669;
  margin: 0 auto;
  width: 900px;
  height: 260px;
}

::selection {
  color: #fff;
  background: #f90;
}

.select, .text, .button, .button2 {
  height: 25px;
  margin: 15px 5px 10px;
  padding: 0 10px;
  border: 1px solid #669;
}

.select {
  width: 80px;
  background: #aad;
}

.button {
  height: 25px;
  background: #aad;
}

#checkboxes {
  text-align: left;
  border: 1px solid #000;
}

.chkbx {
  text-align: left;
  display: inline-block;
  color: #f00 !important;
  width: 15px;
  height: 15px;
  margin: 10px 10px 10px 25px;
}

.bold {
  font: normal bold 23px/23px serif;
}

.text {
  padding: 2px 10px;
  background: #99f;
  height: 25px;
  width: 860px;
}

#passbox1 {
  letter-spacing: 1px;
  font: normal normal 17px/17px serif;
}
    <!DOCTYPE html>
    <html lang="en">
    	<body>
    		<div class="box">
    			<form name="passform1">
    				<p>
    					<select class="select" name="length">
    						<option value="1">01</option>	<option value="2">02</option>	<option value="3">03</option>
    						<option value="4">04</option>	<option value="5">05</option>	<option value="6">06</option>
    						<option value="7">07</option>	<option value="8">08</option>	<option value="9">09</option>
    						<option value="10">10</option>	<option value="11">11</option>	<option value="12">12</option>
    						<option value="13">13</option>	<option value="14">14</option>	<option value="15">15</option>
    						<option value="16">16</option>	<option value="17">17</option>	<option value="18">18</option>
    						<option value="19">19</option>	<option value="20">20</option>	<option value="21">21</option>
    						<option value="22">22</option>	<option value="23">23</option>	<option value="24">24</option>
    						<option value="25">25</option>	<option value="26">26</option>	<option value="27">27</option>
    						<option value="28">28</option>	<option value="29">29</option>	<option value="30">30</option>
    					</select>
    				</p>
    				<div id="checkboxes">
    					<p><input type="checkbox" id="lowercheck" class="chkbx"> <span class="bold">[</span> a - z <span class="bold">]</span></p>
    					<p><input type="checkbox" id="uppercheck" class="chkbx"> <span class="bold">[</span> A - Z <span class="bold">]</span></p>
    					<p><input type="checkbox" id="numbercheck" class="chkbx"> <span class="bold">[</span> 0 1 2 3 4 5 6 7 8 9 <span class="bold">]</span></p>
    					<p><input type="checkbox" id="spec1check" class="chkbx"> <span class="bold">[</span> ! @ # $ % ^ & * | ? <span class="bold">]</span></p>
    					<p><input type="checkbox" id="spec2check" class="chkbx"> <span class="bold">[</span> ` ~ . , ; : - _ <span class="bold">]</span></p>
    					<p><input type="checkbox" id="spec3check" class="chkbx"> <span class="bold">[</span> ( ) [ ] { } &lt; &gt; <span class="bold">]</span></p>
    				</div>
    				<p>
    					<input class="text" name="passbox1" type="text" tabindex="1" id="passbox1">
    				</p>
    				<p>
    					<input class="button" type="button" value="Generate" onClick="javascript:formSubmit1()" tabindex="2">
    					<input class="button" type="reset" value="Clear" tabindex="3">
    				</p>
    			</form>
    		</div>
    	</body>
    </html>

2 个答案:

答案 0 :(得分：0)

唯一错误的是Titus指出的是正确的形式：

var i1 = Math.floor(Math.random() * chars1.length);

现在，如果您运行代码段，则按预期工作。

function ranPass1(length) {
    var lower = "";
    var upper = "";
    var number = "";
    var spec1 = "";
    var spec2 = "";
    var spec3 = "";
    var chars1 = "";
    var pass1 = "";
    if (lowercheck.checked == true) {
        lower = "abcdefghijklmnopqrstuvwxyz";
        chars1 = chars1.concat(lower);
    }
    if (uppercheck.checked == true) {
        upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        chars1 = chars1.concat(upper);
    }
    if (numbercheck.checked == true) {
        number = "0123456789";
        chars1 = chars1.concat(number);
    }
    if (spec1check.checked == true) {
        spec1 = "!@#$%^&*|?";
        chars1 = chars1.concat(spec1);
    }
    if (spec2check.checked == true) {
        spec2 = "`~.,;:-_";
        chars1 = chars1.concat(spec2);
    }
    if (spec3check.checked == true) {
        spec3 = "()[]{}\<\>";
        chars1 = chars1.concat(spec3);
    }

    for(var x1 = 0; x1 < length; x1++) {
        var i1 = Math.floor(Math.random() * chars1.length);
        pass1 += chars1.charAt(i1);
    }
    return pass1;
}

function formSubmit1()
{
    passform1.passbox1.value = ranPass1(passform1.length.value);
    return false;
}
* {
  margin: 0;
  border: 0;
  padding: 0;
  color: #000;
  box-size: border-box;
}

html, body {
  height: auto;
  min-height: 100%;
  text-align: center;
  font: normal normal 17px/17px serif;
}

.box {
  background-color: #ccf;
  border: 1px solid #669;
  margin: 0 auto;
  width: 900px;
  height: 260px;
}

::selection {
  color: #fff;
  background: #f90;
}

.select, .text, .button, .button2 {
  height: 25px;
  margin: 15px 5px 10px;
  padding: 0 10px;
  border: 1px solid #669;
}

.select {
  width: 80px;
  background: #aad;
}

.button {
  height: 25px;
  background: #aad;
}

#checkboxes {
  text-align: left;
  border: 1px solid #000;
}

.chkbx {
  text-align: left;
  display: inline-block;
  color: #f00 !important;
  width: 15px;
  height: 15px;
  margin: 10px 10px 10px 25px;
}

.bold {
  font: normal bold 23px/23px serif;
}

.text {
  padding: 2px 10px;
  background: #99f;
  height: 25px;
  width: 860px;
}

#passbox1 {
  letter-spacing: 1px;
  font: normal normal 17px/17px serif;
}
    <!DOCTYPE html>
    <html lang="en">
    	<body>
    		<div class="box">
    			<form name="passform1">
    				<p>
    					<select class="select" name="length">
    						<option value="1">01</option>	<option value="2">02</option>	<option value="3">03</option>
    						<option value="4">04</option>	<option value="5">05</option>	<option value="6">06</option>
    						<option value="7">07</option>	<option value="8">08</option>	<option value="9">09</option>
    						<option value="10">10</option>	<option value="11">11</option>	<option value="12">12</option>
    						<option value="13">13</option>	<option value="14">14</option>	<option value="15">15</option>
    						<option value="16">16</option>	<option value="17">17</option>	<option value="18">18</option>
    						<option value="19">19</option>	<option value="20">20</option>	<option value="21">21</option>
    						<option value="22">22</option>	<option value="23">23</option>	<option value="24">24</option>
    						<option value="25">25</option>	<option value="26">26</option>	<option value="27">27</option>
    						<option value="28">28</option>	<option value="29">29</option>	<option value="30">30</option>
    					</select>
    				</p>
    				<div id="checkboxes">
    					<p><input type="checkbox" id="lowercheck" class="chkbx"> <span class="bold">[</span> a - z <span class="bold">]</span></p>
    					<p><input type="checkbox" id="uppercheck" class="chkbx"> <span class="bold">[</span> A - Z <span class="bold">]</span></p>
    					<p><input type="checkbox" id="numbercheck" class="chkbx"> <span class="bold">[</span> 0 1 2 3 4 5 6 7 8 9 <span class="bold">]</span></p>
    					<p><input type="checkbox" id="spec1check" class="chkbx"> <span class="bold">[</span> ! @ # $ % ^ & * | ? <span class="bold">]</span></p>
    					<p><input type="checkbox" id="spec2check" class="chkbx"> <span class="bold">[</span> ` ~ . , ; : - _ <span class="bold">]</span></p>
    					<p><input type="checkbox" id="spec3check" class="chkbx"> <span class="bold">[</span> ( ) [ ] { } &lt; &gt; <span class="bold">]</span></p>
    				</div>
    				<p>
    					<input class="text" name="passbox1" type="text" tabindex="1" id="passbox1">
    				</p>
    				<p>
    					<input class="button" type="button" value="Generate" onClick="javascript:formSubmit1()" tabindex="2">
    					<input class="button" type="reset" value="Clear" tabindex="3">
    				</p>
    			</form>
    		</div>
    	</body>
    </html>

答案 1 :(得分：0)

问题是passform1.length.value是一个字符串（例如"5"）。将整数与字符串进行比较时，javascript会默默地将第一个值强制转换为字符串，所以

console.log(2 < "1")
console.log(2 < "13")

有效地比较两个字符串的长度。您需要的是在传递给passform1.length.value方法之前将ranPass1()转换为数字，一种方法是使用此类parseInt()方法

ranPass1(parseInt(passform1.length.value))
相关问题
最新问题