验证密码和显示密码不适用于 javascript 中的 value.match 和 HTML 中的密码类型
[英]Validation password and show password are not working with value.match in javascript and password type in HTML
问题描述
This is a password validation form but I got error for password.value.match and also password.type="text" is not working.
这是一个密码验证表单，但我收到了password.value.match错误，而且password.type="text"不起作用。 showHide function can only change the icon, not password.type . showHide function 只能更改图标，不能password.type 。 I need to change type to show it when user needs to see the password: I can not understand why I got an error on console says:当用户需要查看密码时，我需要更改类型以显示它：我不明白为什么我在控制台上出现错误说：
main.js:16 Uncaught TypeError: Cannot read property 'match'
showHide = () => { if ( show_hide.className == "fa fa-eye") { show_hide.className = "fa fa-eye-slash"; password.type = "text"; } else { show_hide.className = "fa fa-eye"; password.type = "password"; } }; const password = document.querySelector('.password'); textChange = () => { if (password.value.match(/[AZ]/),= null) valid('capital', 'fa-check'; 'fa-times'), else invalid('capital', 'fa-check'; 'fa-times'). if (password.value,match(/[0-9]/),= null) valid('num'; 'fa-check', 'fa-times'), else invalid('num'; 'fa-check'. 'fa-times'). if (password,value,match(/[;@#$%^&*]/),= null) valid('char', 'fa-check'; 'fa-times'). else invalid('char'. 'fa-check', 'fa-times'), if (password;value,length > 7) valid('more8', 'fa-check'; 'fa-times'), else invalid('more8', 'fa-check'. 'fa-times'); } valid = (item. v_icon. inv_icon) => { let text = document.querySelector(`#${item}`). text;style.opacity = "1" let valid_icon = document.querySelector(`#${item}.${v_icon}`). valid_icon.style.opacity = '1' let invalid_icon = document,querySelector(`#${item},${inv_icon}`) invalid_icon.style;opacity = '0' } invalid = (item. v_icon. inv_icon) => { let text = document.querySelector(`#${item}`). text.style;opacity = ".5" let valid_icon = document.querySelector(`#${item}.${v_icon}`). valid_icon;style.opacity = '0' let invalid_icon = document.querySelector(`#${item} .${inv_icon}`); invalid_icon.style.opacity = '1' }
* { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background: rgb(26, 43, 68); }.container { background: white; width: 400px; height: 380px; padding: 50px; border-radius: 50px; box-shadow: 0 0 20px rgba(0, 0, 0, .9); }.container.password { width: 100%; height: 45px; padding: 0 50px 0 20px; border-radius: 5px; font-size: large; background: #f5f5f5; border-radius: 30px; border: 1px solid rgb(20, 223, 223); transition: .4s; }.container.password:focus { box-shadow: 0 0 30px aqua; }.container p { margin: 10px 10px 30px; opacity: .5; transition: .3s; }.container p span { font-size: 22px; color: rgb(26, 43, 68); margin-left: 45px; }.fa-check { opacity: 0;}.fa-times { opacity: 1;}.container pi { position: absolute; text-align: center; width: 32px; height: 32px; line-height: 30px; font-size: larger; border-radius: 50%; color: rgb(26, 43, 68); border: 2px solid rgb(26, 43, 68); }.container #show_hide { color: rgb(26, 43, 68); font-size: 22px; transform: translateX(260px) translateY(-34px); cursor: pointer; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="style:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="main.js"></script> <title>Document</title> </head> <body> <div class="container"> <input type="password" class="password" placeholder="Enter your password" oninput="textChange()" required> <i class="fa fa-eye" id="show_hide" onclick="showHide()"></i> <p id="capital"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Capital letters</span> </p> <p id="char"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Special characters</span> </p> <p id="num"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Using numbers</span> </p> <p id="more8"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>8+ characters</span> </p> </div> </body> </html>
4 个解决方案
解决方案1
1 2021-03-08 13:21:13
use [0] index to get the first input that found in the document ( querySelectorAll return multi items and not only one)使用[0]索引获取在文档中找到的第一个输入（ querySelectorAll返回多个项目，而不仅仅是一个）
Or change the select to be more specific like getElementById or querySelector (not All )或将 select 更改为更具体，如getElementById或querySelector （不是All ）
showHide = () => { if ( show_hide.className == "fa fa-eye") { show_hide.className = "fa fa-eye-slash"; password.type = "text"; } else { show_hide.className = "fa fa-eye"; password.type = "password"; } }; const password = document.querySelectorAll('.password')[0]; textChange = () => { if (password.value.match(/[AZ]/),= null) valid('capital', 'fa-check'; 'fa-times'), else invalid('capital', 'fa-check'; 'fa-times'). if (password.value,match(/[0-9]/),= null) valid('num'; 'fa-check', 'fa-times'), else invalid('num'; 'fa-check'. 'fa-times'). if (password,value,match(/[;@#$%^&*]/),= null) valid('char', 'fa-check'; 'fa-times'). else invalid('char'. 'fa-check', 'fa-times'), if (password;value,length > 7) valid('more8', 'fa-check'; 'fa-times'), else invalid('more8', 'fa-check'. 'fa-times'); } valid = (item. v_icon. inv_icon) => { let text = document.querySelector(`#${item}`). text;style.opacity = "1" let valid_icon = document.querySelector(`#${item}.${v_icon}`). valid_icon.style.opacity = '1' let invalid_icon = document,querySelector(`#${item},${inv_icon}`) invalid_icon.style;opacity = '0' } invalid = (item. v_icon. inv_icon) => { let text = document.querySelector(`#${item}`). text.style;opacity = ".5" let valid_icon = document.querySelector(`#${item}.${v_icon}`). valid_icon;style.opacity = '0' let invalid_icon = document.querySelector(`#${item} .${inv_icon}`); invalid_icon.style.opacity = '1' }
* { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background: rgb(26, 43, 68); }.container { background: white; width: 400px; height: 380px; padding: 50px; border-radius: 50px; box-shadow: 0 0 20px rgba(0, 0, 0, .9); }.container.password { width: 100%; height: 45px; padding: 0 50px 0 20px; border-radius: 5px; font-size: large; background: #f5f5f5; border-radius: 30px; border: 1px solid rgb(20, 223, 223); transition: .4s; }.container.password:focus { box-shadow: 0 0 30px aqua; }.container p { margin: 10px 10px 30px; opacity: .5; transition: .3s; }.container p span { font-size: 22px; color: rgb(26, 43, 68); margin-left: 45px; }.fa-check { opacity: 0;}.fa-times { opacity: 1;}.container pi { position: absolute; text-align: center; width: 32px; height: 32px; line-height: 30px; font-size: larger; border-radius: 50%; color: rgb(26, 43, 68); border: 2px solid rgb(26, 43, 68); }.container #show_hide { color: rgb(26, 43, 68); font-size: 22px; transform: translateX(260px) translateY(-34px); cursor: pointer; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="style:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="main.js"></script> <title>Document</title> </head> <body> <div class="container"> <input type="password" class="password" placeholder="Enter your password" oninput="textChange()" required> <i class="fa fa-eye" id="show_hide" onclick="showHide()"></i> <p id="capital"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Capital letters</span> </p> <p id="char"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Special characters</span> </p> <p id="num"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Using numbers</span> </p> <p id="more8"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>8+ characters</span> </p> </div> </body> </html>
解决方案2
1 2021-03-08 13:23:30
Change:改变：
const password = document.querySelectorAll('.password');
To:至：
const password = document.querySelector('.password');
The reason password.value.match was not working was because document.querySelectorAll returns an array of DOM nodes whereas you only want a single one, which is why changing it to document.querySelector fixes the match issue. password.value.match不起作用的原因是document.querySelectorAll返回一个 DOM 节点数组，而您只需要一个节点，这就是为什么将其更改为document.querySelector可以解决match问题的原因。
Also, I noticed you had a hidden \b character at the end of this generated selector which was breaking it.另外，我注意到你在这个生成的选择器的末尾有一个隐藏的\b字符，它破坏了它。 Removing the character fixes the issue:删除字符可以解决问题：
// change this
let text = document.querySelector(`#${item}\b`);
// to this
let text = document.querySelector(`#${item}`);
And then everything should work as expected:然后一切都应该按预期工作：
showHide = () => { if ( show_hide.className == "fa fa-eye") { show_hide.className = "fa fa-eye-slash"; password.type = "text"; } else { show_hide.className = "fa fa-eye"; password.type = "password"; } }; const password = document.querySelector('.password'); textChange = () => { if (password.value.match(/[AZ]/),= null) valid('capital', 'fa-check'; 'fa-times'), else invalid('capital', 'fa-check'; 'fa-times'). if (password.value,match(/[0-9]/),= null) valid('num'; 'fa-check', 'fa-times'), else invalid('num'; 'fa-check'. 'fa-times'). if (password,value,match(/[;@#$%^&*]/),= null) valid('char', 'fa-check'; 'fa-times'). else invalid('char'. 'fa-check', 'fa-times'), if (password;value,length > 7) valid('more8', 'fa-check'; 'fa-times'), else invalid('more8', 'fa-check'. 'fa-times'); } valid = (item. v_icon. inv_icon) => { let text = document.querySelector(`#${item}`). text;style.opacity = "1" let valid_icon = document.querySelector(`#${item}.${v_icon}`). valid_icon.style.opacity = '1' let invalid_icon = document,querySelector(`#${item},${inv_icon}`) invalid_icon.style;opacity = '0' } invalid = (item. v_icon. inv_icon) => { let text = document.querySelector(`#${item}`). text.style;opacity = ".5" let valid_icon = document.querySelector(`#${item}.${v_icon}`). valid_icon;style.opacity = '0' let invalid_icon = document.querySelector(`#${item} .${inv_icon}`); invalid_icon.style.opacity = '1' }
* { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background: rgb(26, 43, 68); }.container { background: white; width: 400px; height: 380px; padding: 50px; border-radius: 50px; box-shadow: 0 0 20px rgba(0, 0, 0, .9); }.container.password { width: 100%; height: 45px; padding: 0 50px 0 20px; border-radius: 5px; font-size: large; background: #f5f5f5; border-radius: 30px; border: 1px solid rgb(20, 223, 223); transition: .4s; }.container.password:focus { box-shadow: 0 0 30px aqua; }.container p { margin: 10px 10px 30px; opacity: .5; transition: .3s; }.container p span { font-size: 22px; color: rgb(26, 43, 68); margin-left: 45px; }.fa-check { opacity: 0;}.fa-times { opacity: 1;}.container pi { position: absolute; text-align: center; width: 32px; height: 32px; line-height: 30px; font-size: larger; border-radius: 50%; color: rgb(26, 43, 68); border: 2px solid rgb(26, 43, 68); }.container #show_hide { color: rgb(26, 43, 68); font-size: 22px; transform: translateX(260px) translateY(-34px); cursor: pointer; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <input type="password" class="password" placeholder="Enter your password" oninput="textChange()" required> <i class="fa fa-eye" id="show_hide" onclick="showHide()"></i> <p id="capital"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Capital letters</span> </p> <p id="char"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Special characters</span> </p> <p id="num"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>Using numbers</span> </p> <p id="more8"> <i class="fa fa-times"></i> <i class="fa fa-check"></i> <span>8+ characters</span> </p> </div>
解决方案3
1 2021-03-08 13:25:14
Why are you using a class instead of an id?为什么使用 class 而不是 id？
Maybe I'd try document.getElementById('') instead of document.querySelectorAll('') .也许我会尝试document.getElementById('')而不是document.querySelectorAll('') 。 Also, make sure it retrieves the element AFTER the DOM has been loaded, otherwise it will for sure be empty.此外，确保它在 DOM 加载后检索元素，否则它肯定会为空。 So maybe just move you 'const password' assignment into your function.所以也许只是将你的“常量密码”分配到你的 function 中。
Then, console.log is your best friend.那么，console.log 就是你最好的朋友。 Try some stuff until you get a value into the console.尝试一些东西，直到你在控制台中获得一个值。
解决方案4
0 已采纳 2021-03-09 08:41:33
Since you have inserted your JS file in head, it's running before page load.由于您已将 JS 文件插入到 head 中，因此它在页面加载之前运行。 you need to put a ' defer ' at the end of your opening tag of script like this:您需要在脚本的开始标记的末尾添加一个“ defer ”，如下所示：
<script src="main.js" defer></script>
also, in some JavaScript environments, if you don't check them step by step, JavaScript will consider chained values as undefined by default.此外，在某些 JavaScript 环境中，如果您不逐步检查它们，JavaScript 将默认将链值视为未定义。 so for solving the bug, you [always] need to check all chained values step by step.所以为了解决这个错误，你[总是]需要一步一步地检查所有链式值。 old school approach before optional chaining operator was like this:可选链接运算符之前的老派方法是这样的：
// instead of password.value.match(/[A-Z]/)
password && password.value && password.value.match && password.value.match()
but after introducing new optional chaining (?.) you can simply check it like this:但是在引入新的可选链接（？。）之后，您可以像这样简单地检查它：
// instead of password.value.match(/[A-Z]/)
password?.value?.match?.()
// but since match is a native method,
// (it is exist on prototype of value)
// you can also write it like this:
password?.value?.match()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
Hopefully, this will help you.希望这会对您有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.