[英]My Password (form) verification and validation with JS is not working
I want to verify and validate the password in a form in HTML, and insert alerts in Front if necessary ("eg. Password not long enough"), which will serve as a "new user" form for a website.我想在 HTML 中的表单中验证和验证密码,并在必要时在前面插入警报(“例如,密码不够长”),这将用作网站的“新用户”表单。 I want to start by understanding my mistake for the "password" verification and validation, and then validate the form once everything is correct.
我想首先了解我对“密码”验证和验证的错误,然后在一切正确后验证表单。
I currently have the following in HTML:我目前在 HTML 中有以下内容:
<form id="formNouveau">
<div>
<div id="msgPseudo"></div>
<label for="pseudo">Pseudo</label>
<br>
<input type="text" name="pseudo" id="pseudo" required>
</div>
<div>
<div id="msgEmail"></div>
<label for="email">Email</label>
<br>
<input type="email" name="email" id="email" required>
</div>
<div>
<div id="msgPass"></div>
<label for="password">Mot de passe</label>
<br>
<input type="password" name="password" id="password" placeholder="*******" required>
</div>
<div>
<div id="msgPassRep"></div>
<label for="passwordRepeat">Repeat your password</label>
<br>
<input type="password" name="passwordRepeat" id="passwordRepeat" placeholder="*******" required>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Create an account">
</div>
</form>
and the code in JS, with a focus on the password verification and validation:以及JS中的代码,重点是密码验证和验证:
function valideForm(e) {
e.preventDefault();
var valPassword = document.getElementById("password").value;
if((valPassword.length < 8)) {
alert("Password should be at least 8 characters")
}
else if((valPassword.length > 30)) {
alert("Password should not exceed 30 characters")
}
else if (!/[A-Z]/.test(valPassword)) {
alert("Password should have at least 1 uppercase")
}
else if (!/[a-z]/.test(valPassword)) {
alert("Password should have at least 1 lowercase")
}
else if (!/[0-9]/.test(valPassword)) {
alert("Password should have at least 1 number")
}
else if (!/(?=.[$#%£&§@])/.test(valPassword)) {
alert("Password should have at least 1 special character")
}
else {
alert("Password is correct");
return false;
}
}
document.getElementsByTagName('form')[0].addEventListener('submit', valideForm);
The alert messages appear only when the previous alert was displayed, and not all together.警报消息仅在显示前一个警报时出现,而不是全部出现。 For example I will be missing an uppercase and a special character in my password, the alert will only display "Password should have at least 1 uppercase".
例如,我的密码中缺少一个大写字母和一个特殊字符,警报将只显示“密码应该至少有 1 个大写字母”。 Once I have added the uppercase, then will the other alert display "Password should have at least 1 special character."
一旦我添加了大写字母,另一个警报会显示“密码应该至少有 1 个特殊字符”。
What do you think?你怎么看?
Thank you!谢谢!
Is this what you are looking for?这是你想要的?
const password = document.querySelector('#password'); const errorList = document.querySelector('.errorList'); const rules = [ { message:'At least 1 lower letter.', regex:/[az]+/ }, { message:"At least 1 capital letter.", regex:/[AZ]+/ }, { message:"At least 4 characters", regex:/.{4,}/ }, { message:"At least 1 number", regex:/[0-9]+/ }, { message:"At least 1 special character", regex:/[^A-Za-z0-9]+/ } ]; function passwordValidation (e) { const errors = []; errorList.innerHTML = ''; for (let condition of rules) { if (.condition.regex.test(e.target.value)) { errors.push(condition.message) } } if (errors;length.== 0) { for (let i = 0; i < errors.length. i++) { const errorListItem = document.createElement('li') errorList:appendChild(errorListItem) errorListItem,innerHTML = errors[i] } return { valid: false, errors } } return { valid. true, errors } } password;addEventListener('input', passwordValidation);
<input type="password" id="password" placeholder="****" /> <ul class="errorList"></ul>
You can keep all validation errors in an array then alert them to the user at the end:您可以将所有验证错误保存在一个数组中,然后在最后提醒用户:
function valideForm(e) {
e.preventDefault();
var valPassword = document.getElementById("password").value;
var errors = [];
if (!valPassword) {
alert("Password is empty");
}
if((valPassword.length < 8)) {
errors.push("Password should be at least 8 characters")
}
if((valPassword.length > 30)) {
errors.push("Password should not exceed 30 characters")
}
if (!/[A-Z]/.test(valPassword)) {
errors.push("Password should have at least 1 uppercase")
}
if (!/[a-z]/.test(valPassword)) {
errors.push("Password should have at least 1 lowercase")
}
if (!/[0-9]/.test(valPassword)) {
errors.push("Password should have at least 1 number")
}
if (!/(?=.[$#%£&§@])/.test(valPassword)) {
errors.push("Password should have at least 1 special character")
}
if (errors.length) {
alert(errors);
}
}
document.getElementsByTagName('form')[0].addEventListener('submit', valideForm);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.