0

我正在使用 js 和 html 进行密码验证。如果输入无效，它假设在输入部分下显示某些信息。但无论输入是什么，都没有任何消息。我不确定我做错了哪一部分。代码贴在下面

        var name = document.getElementById("userName");
        var passWord = document.getElementById("passWord");
        var flag;
        
        function check() {
            flag = validateInput(name, passWord);
            if (flag) 
                isPaswordValid(passWord);
            if (flag) 
                ispassWordStrong(passWord);
        }
        
        function validateInput(name, passWord) {
            if (name.length = 0 || passWord.length < 0) {
                document.getElementById("errorMessage").innerHTML = "Please enter Username and passWord";
                return false;
            }
            else {
                document.getElementById("errorMessage").innerHTML = "Valid input";
                return true;
            }
        }

            //Check Username and passWord are valid
            function isPaswordValid(passWord) {
                var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;

                //Check passWord is valid or not and having length of passord should not less than 8
                if (passWord.length < 8 || (!re.test(passWord))) {
                    document.getElementById("errorMessage").innerHTML = "Invalid passWord. Please enter new passWord";
                    return false;
                }
                else {
                    document.getElementById("errorMessage").innerHTML = "Valid input";
                return true;
                }               
            }

            //Check password has no more than 3 characters from username in passWord
            function ispassWordStrong(userName, passWord) {
                var n = 0;

                for (var i = 0; i < userName.length; i++) {
                    if (passWord.indexOf(userName[i]) >= 0) {
                        n += 1;
                    }
                }

                if (n > 3) {
                    document.getElementById("errorMessage").innerHTML = "passWord can't contain more than 3 characters from the username.";
                }
                else {
                    document.getElementById("errorMessage").innerHTML = "Valid input";
                }               
            }
        });
<body>
    <fieldset>
        <legend>Password Validator</legend>
        User Name:
        <input type="text" id="userName" name="userName" placeholder="User Name" onkeyup='check();' /><br>
        passWord:
        <input type="password" id="passWord" name="passWord" placeholder="Password" onkeyup='check();' />
        <input type="submit" id="inputValidate" value="Validate"><br /><br />
        <b><span style="color:red;" id="errorMessage"></span></b>
    </fieldset>
</body>

抱歉，代码很长，感谢您的帮助。

4

1 回答 1

1

以下应该满足您的要求：

// collect all DOM elements in object ti: ti.i, ti.e, ti.u, ti.p
const ti=["inputValidate","errorMessage","userName","passWord"]
  .reduce((a,c)=>(a[c.substr(0,1)]=document.querySelector('#'+c),a),{});

// delegated event listening for event "input":
document.querySelector('fieldset').addEventListener('input',ev=>{
  if (Object.values(ti).indexOf(ev.target)>1){ // for userName and passWord do ...
    let u=ti.u.value.toLowerCase();
    ti.e.textContent= (ti.p.value.length > 2
              && ti.p.value.split('').reduce((a,c)=>a+=u.indexOf(c.toLowerCase())>-1?1:0,0) > 2 )
        ? "The password contains at least 3 letters from the username!" : "";
}})

// event listening for button click on "validate":
ti.i.addEventListener('click',ev=>!(ti.e.textContent=
  (ti.u.value.trim().length ? "" : "User name is empty.") ||
  (ti.p.value.match(/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/)
        ? "" : "The password is not complex enough!" )))
<fieldset>
  <legend>Password Validator</legend>
  User Name:<br/>
  <input type="text" id="userName" name="userName" placeholder="User Name"/><br>
  passWord:<br/>
  <input type="password" id="passWord" name="passWord" placeholder="Password"/> 
  <input type="submit" id="inputValidate" value="Validate"><br/>
  <b><span style="color:red;" id="errorMessage"></span></b>
</fieldset>

在字段中输入字符时#userName，#passWord它会检查密码中是否出现用户名字符。这是在忽略大小写的情况下完成的。当点击“验证”按钮时，会根据正则表达式检查密码的复杂性/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/。这个正则表达式至少要求

  • 一个大写字符，
  • 一个小写字符
  • 一个数字和
  • 最小长度为 8。

还对用户名进行了初步检查。它必须至少包含一个非空白字符。false只要检测到错误，“验证”按钮上的单击事件的事件处理程序就会返回。这可用于阻止提交表单。但是，表格本身不是由 OP 提供的。

于 2020-11-02T12:27:21.290 回答