JavaScript 中的密码字符检查器

Question

我正在尝试构建一些东西来检查我在提示中输入的密码有一个大写字母，一个小写字母，一个特殊符号和一个长度......但有时当我只输入大写字母和小写字母时，我不会收到警报(你会在代码中看到它(。

我在控制台中也有以下错误：Cannot read property 'length' of null at hasUpperCase"

我将在此处发布代码：

var parola = prompt('Introdu parola:');
function hasUpperCase(parola){
for(i = 0; i < parola.length; i++){
if(parola[i] === parola[i].toUpperCase()){
return true;
}
}
}
function hasLowerCase(parola){
for(i = 0; i < parola.length; i++){
if(parola[i] === parola[i].toLowerCase()){
return true;
}
}
}
var minLength = 8;
function isLongEnough(parola){
if(parola.length >= minLength){
return true;
}
}
function hasSpecialCharacter(parola){
var specialCharacters = "£$%^&*@~";
for(i = 0; i < parola.length; i++){
for(j = 0; j < specialCharacters.length; j++){
if(parola[i] === specialCharacters[j]){
return true;
}
}
}
}
function isPasswordValid(parola){
if(!hasUpperCase(parola)){
alert('The password requires a capital letter!');
var parola = prompt('Introdu parola:');
}
if(!hasLowerCase(parola)){
alert('The password requires a lower case letter!');
var parola = prompt('Introdu parola:');
}
if(!isLongEnough(parola)){
alert('The password is not long enough!');
var parola = prompt('Introdu parola:');
}
if(!hasSpecialCharacter(parola)){
alert('The password requires a special character');
var parola = prompt('Introdu parola:');
}
if((hasSpecialCharacter(parola) && hasLowerCase(parola) && hasUpperCase(parola)  && isLongEnough(parola)){
}
}
isPasswordValid(parola);

Answer 1

除了实现问题之外，首先通过在isPasswordValid函数中检查null或未定义的第一件事来修复错误。此外，正如 Patrick 明智地建议的那样，使用正则表达式进行这些检查。我还建议始终在检查函数中返回布尔值，方法是在每个 for 循环后返回 false。

Answer 2

您可以使用正则表达式

/^(?=.{1,}[a-z])(?=.{1,}[A-Z])(?=.{1,}([£$%^&*@~])).{8,20}$/

以匹配所有这些示例。 以下是简要说明：

^                       // the start of the string
(?=.{1,}[a-z])             // use positive look ahead to see if at least one lower case letter exists
(?=.{1,}[A-Z])             // use positive look ahead to see if at least one upper case letter exists
(?=.{1,}[£$%^&*@~])  // use positive look ahead to see if at least one underscore or special character exists
.{8,20}                 // gobble up the entire string and match between 8 and 20
$                       // the end of the string

你会像这样使用它：

function isPasswordValid(parola)
{  
if(!parola)
return false;
var reg = /^(?=.{1,}[a-z])(?=.{1,}[A-Z])(?=.{1,}([£$%^&*@~])).{8,20}$/g;
if(parola && reg.test(parola)){
//do stuff here
}
}

如果您不想执行所有这些操作，那么对于您的代码来说，这是一个非常简单的修复程序！ 删除额外的(并将其添加到测试中：

function isPasswordValid(parola){
if(!parola)
return false;
.
.
.
.
.
.
if(parola && (hasSpecialCharacter(parola) && hasLowerCase(parola) && hasUpperCase(parola)  && isLongEnough(parola))){
// do stuff here
}

如果为以下条件，则仅检查变量将评估为 false：

• 零
• 定义
• 南
• 空字符串 ("(
• 0
• 假

否则也是如此。

这应该可以解决您的所有问题。

更新
感谢帕特里克·罗伯茨指出正则表达式中的错误。下面是一个工作示例。

const regex = /^(?=.{1,}[a-z])(?=.{1,}[A-Z])(?=.{1,}([£$%^&*@~])).{8,20}$/g;
const str = 'aA$';
let m;
if ((m = regex.exec(str)) !== null) {
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
console.log(`Found match, group ${groupIndex}: ${match}`);
});
}
else{
console.log('no match found')
}

Answer 3

解决您提到的错误，即

Cannot read property 'length' of null at hasUpperCase

您必须检查从prompt()返回的值是否由于用户取消了输入而未null。

否则，可以从<input>读取字符串，以确保该值始终为字符串。

其他一些问题是，您没有利用正则表达式的简单性来强制执行使用for循环实现的某些约束，这将使您的代码更具可读性、可维护性和更易于消化。

此外，正如我在评论中建议的那样，更好的做法是允许isLongEnough()接受密码上的参数、局部变量甚至minlength属性来指示最小长度，而不是当前使用的作用域变量。

最后，利用<input>元素的pattern属性来自动化一些可以用正则表达式表示的需求会有所帮助。请注意，我试图将其包含在下面的解决方案中，但是pattern="(?=[a-z])(?=[A-Z])(?=[£$%^&*@~])"中的前瞻似乎表现得有点错误，所以我省略了这个特定的建议。

将这些建议处理到解决方案中可能如下所示：

function hasUpperCase(parola) {
return /[A-Z]/.test(parola);
}
function hasLowerCase(parola) {
return /[a-z]/.test(parola);
}
function isLongEnough(parola, minLength) {
return parola.length >= minLength;
}
function hasSpecialCharacter(parola) {
return /[£$%^&*@~]/.test(parola);
}
function checkPasswordValidity() {
var parola = this.value;
var minLength = Number(this.getAttribute('minlength'));
var errors = [];
if (!isLongEnough(parola, minLength)) {
errors.push('a minimum length of ' + minLength + ' characters');
}
if (!hasUpperCase(parola)) {
errors.push('a capital letter');
}
if (!hasLowerCase(parola)) {
errors.push('a lower case letter');
}
if (!hasSpecialCharacter(parola)) {
errors.push('a special character');
}
if (errors.length > 0) {
this.setCustomValidity('The password requires ' + errors.join(', '));
} else {
this.setCustomValidity('');
}
}
document.querySelector('[name="password"]').addEventListener('input', checkPasswordValidity);

<form>
<input name="password" type="text" placeholder="Introdu parola" minlength="8" required>
<input type="submit" value="Submit">
</form>

Answer 4

该错误是提示取消的原因。因此，我认为您应该使用文本字段中的值并验证

这是这样做的工作方法

$('#form').on('submit', function() {
event.preventDefault();
var parola = $('#txt_name').val();
isPasswordValid(parola);
})
function hasUpperCase(parola){
for(i = 0; i < parola.length; i++){
if(parola[i] === parola[i].toUpperCase()){
return true;
}
}
}
function hasLowerCase(parola){
for(i = 0; i < parola.length; i++){
if(parola[i] === parola[i].toLowerCase()){
return true;
}
}
}
var minLength = 8;
function isLongEnough(parola){
if(parola.length >= minLength){
return true;
}
}
function hasSpecialCharacter(parola){
var specialCharacters = "£$%^&*@~";
for(i = 0; i < parola.length; i++){
for(j = 0; j < specialCharacters.length; j++){
if(parola[i] === specialCharacters[j]){
return true;
}
}
}
}
function isPasswordValid(parola){
if(!hasUpperCase(parola)){
alert('The password requires a capital letter!');
return;
}
if(!hasLowerCase(parola)){
alert('The password requires a lower case letter!');
return;
}
if(!isLongEnough(parola)){
alert('The password is not long enough!');
return;
}
if(!hasSpecialCharacter(parola)){
alert('The password requires a special character');
return;
}
if(hasSpecialCharacter(parola) && hasLowerCase(parola) && hasUpperCase(parola)  && isLongEnough(parola)){
alert('yayyy!!');
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<input type="text" name="text" value="" id="txt_name">
<input type="submit" value="Check password">
</form>

Answer 5

isPasswordValid按顺序调用您的 4 个函数来检查它们的有效性，但如果其中任何一个失败，则不会重新检查提示的值。它只是要求您输入其他内容，然后继续。您可以通过在函数结束时重新调用isPasswordValid来重新检查提示的有效性。在函数结束时调用它可以防止在输入无效输入和有效输入时出现其他提示。

注意：对符号调用toLowerCase()会返回该符号，因此@@@@AAAA符号将是有效的。为了解决这个问题，我在你的函数中使用了正则表达式。

var parola = prompt('Introdu parola:');
function hasUpperCase(parola) {
return /[A-Z]/.test(parola)
}
function hasLowerCase(parola) {
return /[a-z]/.test(parola);
}
var minLength = 8;
function isLongEnough(parola) {
return parola.length >= minLength;
}
function hasSpecialCharacter(parola) {
return /[£$%^&*@~]/.test(parola);
}
var errorMessage;
function isPasswordValid(parola) {
if (!hasUpperCase(parola)) {
errorMessage = 'The password requires a capital letter!';
}
else if (!hasLowerCase(parola)) {
errorMessage = 'The password requires a lower case letter!';
}
else if (!isLongEnough(parola)) {
errorMessage = 'The password is not long enough!';
}
else if (!hasSpecialCharacter(parola)) {
errorMessage = 'The password requires a special character';
}
else {
alert('Password is valid');
return;
}
parola = prompt(errorMessage);
isPasswordValid(parola);
}
isPasswordValid(parola);