Javascript 如何在表单验证结束时添加一个警告，上面写着；表格填写是否正确；？

我创建了一个函数，用于验证包含伪密码、电子邮件和密码的表单

现在，我想为这个函数添加一个最后的警报，它考虑了所有因素，如果每个值都正确（密码正确，pseudo有足够的字符，email正确…），它会显示一个警报，上面写着“表单已完成”

以下是我在HTML中的内容

<form id="formNew">
                <div>
                    <p id="msgPseudo"></p>
                    <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" minlength="8" maxlength="30" required>
                </div>

                <div>
                    <p id="msgPass"></p>
                    <label for="password"> password </label>
                    <br>
                    <input type="password" placeholder="*******" id="password" required>
                </div>

                <div>
                    <div id="msgPassRep"></div>
                    <label for="passwordRepeat">confirm password</label>
                    <br>
                    <input type="password" placeholder="*******" id="confirm_password" required>
                    <span id='message'></span>
                </div>

                <div>
                    <input type="submit" name="submit" id="submit" value="Create an account">
                </div>
            </form>

伪


电子邮件



密码


确认密码

以下是JS中的

function valideForm(e) {

    e.preventDefault();


    var valPseudo = document.getElementById("pseudo").value;
    var valPassword = document.getElementById("password").value;
    var valEmail = document.getElementById("email").value;
    var errorsPass = [];
    var errorsPseudo = [];
    var emailRegex = /.+@.+\..+/;


    let letters = 'abcdefghijklmnopqrstuvwxyz'
    let numbers = '0123456789'
    let letterCount = 0
    let numberCount = 0

    for (let character of valPseudo.toLowerCase()) {
        if (letters.includes(character))
            ++letterCount
        else if (numbers.includes(character))
            ++numberCount
        else
            return false //A non [a-zA-Z0-9] character was present
    }

    if (letterCount + numberCount > 40)
        errorsPseudo.push("Pseudo is too long") //The name is too long
    if (letterCount + numberCount < 5)
        errorsPseudo.push("Pseudo is too short") //The name is too short
    if (letterCount < 1)
        errorsPseudo.push("Pseudo needs at least one letter") //There aren't enough [a-zA-Z] characters
    if (numberCount < 1)
        errorsPseudo.push("Pseudo needs at least one number") //There aren't enough [0-9] characters

    if (errorsPseudo.length) {
        alert(errorsPseudo);
    }



    if (emailRegex.test(valEmail) == false) {
        alert("please enter a valid email");
        return false;
    }


    if (!valPassword) {
        alert("Password is empty");
    }
    if ((valPassword.length < 8)) {
        errorsPass.push("Password should be at least 8 characters")
    }
    if ((valPassword.length > 30)) {
        errorsPass.push("Password should not exceed 30 characters")
    }
    if (!/[A-Z]/.test(valPassword)) {
        errorsPass.push("Password should have at least 1 uppercase")
    }
    if (!/[a-z]/.test(valPassword)) {
        errorsPass.push("Password should have at least 1 lowercase")
    }
    if (!/[0-9]/.test(valPassword)) {
        errorsPass.push("Password should have at least 1 number")
    }
    if (!/(?=.[$#%£&§@])/.test(valPassword)) {
        errorsPass.push("Password should have at least 1 special character")
    }
    if (errorsPass.length) {
        alert(errorsPass);
    }


    var password = document.getElementById("password");
    var confirm_password = document.getElementById("confirm_password");

    function validatePassword() {
        if (password.value != confirm_password.value) {
            confirm_password.setCustomValidity("passwords aren't the same");
        } else {
            confirm_password.setCustomValidity('');
        }
    }

    password.onchange = validatePassword;
    confirm_password.onkeyup = validatePassword;

}

document.getElementsByTagName('form')[0].addEventListener('submit', valideForm);

函数validorm（e）{
e、 预防默认值（）；
var valPseudo=document.getElementById（“pseudo”）.value；
var valPassword=document.getElementById（“密码”）.value；
var valEmail=document.getElementById（“email”）.value；
var errorsPass=[]；
var errorsPseudo=[]；
var emailRegex=/.+@.+\..+/；
让字母='abcdefghijklmnopqrstuvxyz'
让数字='0123456789'
让letterCount=0
设numberCount=0
for（让valPseudo.toLowerCase（）的字符）{
if（字母。包括（字符））
++信数
else if（数字。包括（字符））
++数字计数
其他的
return false//存在非[A-zA-Z0-9]字符
}
如果（字母计数+数字计数>40）
errorsPseudo.push（“Pseudo太长”）//名称太长
如果（字母计数+数字计数<5）
errorsPseudo.push（“Pseudo太短”）//名称太短
如果（信数<1）
errorsPseudo.push（“Pseudo至少需要一个字母”）//没有足够的[a-zA-Z]字符
如果（数字计数<1）
errorsPseudo.push（“Pseudo至少需要一个数字”）//没有足够的[0-9]字符
if（errorsPseudo.length）{
警报（errorsPseudo）；
}
if（emailRegex.test（valEmail）==false）{
警报（“请输入有效电子邮件”）；
返回false；
}
如果（！valPassword）{
警报（“密码为空”）；
}
如果（（valPassword.length<8））{
errorsPass.push（“密码至少应为8个字符”）
}
如果（（valPassword.length>30））{
errorsPass.push（“密码不应超过30个字符”）
}
如果（！/[A-Z]/.test（valPassword））{
errorsPass.push（“密码应至少有1个大写字母”）
}
如果（！/[a-z]/.test（valPassword））{
errorsPass.push（“密码应至少包含1个小写字母”）
}
如果（！/[0-9]/.test（valPassword））{
errorsPass.push（“密码应至少有一个数字”）
}
如果（！/（？=.$#%.&§@]）/.test（valPassword））{
errorsPass.push（“密码应至少有一个特殊字符”）
}
if（错误间隔长度）{
警报（errorsPass）；
}
var password=document.getElementById（“密码”）；
var confirm_password=document.getElementById（“confirm_password”）；
函数validatePassword（）{
if（password.value！=确认密码.value）{
确认_password.setCustomValidity（“密码不同”）；
}否则{
确认密码。设置自定义有效性（“”）；
}
}
password.onchange=validatePassword；
确认\u password.onkeyup=validatePassword；
}
document.getElementsByTagName（'form'）[0].addEventListener（'submit'，Validorm）；

当每个输入都经过验证和验证时，如何添加显示“表单已成功完成”的最终警报

---

谢谢

欢迎来到社区

由于每次未满足适当的规则时都返回

false

，因此只有在满足所有验证规则时，执行才会到达方法的末尾。因此，您可以在最后显示

success

消息

function valideForm(e) {
    e.preventDefault();


    var valPseudo = document.getElementById("pseudo").value;
    var valPassword = document.getElementById("password").value;
    var valEmail = document.getElementById("email").value;
    var errorsPass = [];
    var errorsPseudo = [];
    var emailRegex = /.+@.+\..+/;

    
    // check for non alphanumeric characters
    if (!/^[a-z0-9]+$/i.test(valPseudo)) {
        console.log("check for non alphanumeric characters -> fail")
        return false;
    }
    
    //The name is too long
    if (valPseudo.length > 40) {
        errorsPseudo.push("Pseudo is too long") ;//The name is too long
    }
    //The name is too short
    if (valPseudo.length < 5) {
        errorsPseudo.push("Pseudo is too short"); //The name is too short
    }
    // There aren't enough [a-zA-Z] characters
    if (valPseudo.replace(/[^A-Z]/gi, "").length < 1) {
        errorsPseudo.push("Pseudo needs at least one letter"); //There aren't enough [a-zA-Z] characters
    }
    // There aren't enough [0-9] characters
    if (valPseudo.replace(/[^0-9]/g,"").length < 1) {
        errorsPseudo.push("Pseudo needs at least one number") ;//There aren't enough [0-9] characters
    }
    // if errorPseudo has values then return false;
    if (errorsPseudo.length > 0) {
         alert(errorsPseudo);
        console.log("errorPseudo -> fail");
        return false;
    }



    if (emailRegex.test(valEmail) == false) {
        alert("please enter a valid email");
        console.log("Email -> fail");
        return false;
    }


    if (!valPassword) {
        alert("Password is empty");
        console.log("Password is empty -> fail");
        return false;
    }
    if ((valPassword.length < 8)) {
        errorsPass.push("Password should be at least 8 characters")
    }
    if ((valPassword.length > 30)) {
        errorsPass.push("Password should not exceed 30 characters")
    }
    if (!/[A-Z]/.test(valPassword)) {
        errorsPass.push("Password should have at least 1 uppercase")
    }
    if (!/[a-z]/.test(valPassword)) {
        errorsPass.push("Password should have at least 1 lowercase")
    }
    if (!/[0-9]/.test(valPassword)) {
        errorsPass.push("Password should have at least 1 number")
    }
    if (/^[a-z0-9]+$/i.test(valPassword)) {
        errorsPass.push("Password should have at least 1 special character")
    }
    if (errorsPass.length) {
        alert(errorsPass);
        console.log("Password rules -> fail");
        return false;
    }
    
    // check password validtiy
    if ( !validatePassword() ) {
        console.log("Password validity -> fail");
        return false;
    }
    
    // if execution can reach this line; then the form is validated
    alert("SUCCESS");

}



// moved out of the valideForm method
var password = document.getElementById("password");
var confirm_password = document.getElementById("confirm_password");
function validatePassword() {
    if (password.value != confirm_password.value) {
        confirm_password.setCustomValidity("passwords aren't the same");
        return false;
    } else {
        confirm_password.setCustomValidity('');
        return true;
    }
}

password.onchange = validatePassword;
confirm_password.onkeyup = validatePassword;

document.getElementsByTagName('form')[0].addEventListener('submit', valideForm);

函数validorm（e）{
e、 预防默认值（）；
var valPseudo=document.getElementById（“pseudo”）.value；
var valPassword=document.getElementById（“密码”）.value；
var valEmail=document.getElementById（“email”）.value；
var errorsPass=[]；
var errorsPseudo=[]；
var emailRegex=/.+@.+\..+/；
//检查非字母数字字符
如果（！/^[a-z0-9]+$/i.test（valPseudo））{
log（“检查非字母数字字符->失败”）
返回false；
}
//名字太长了
如果（valPseudo.length>40）{
errorsPseudo.push（“Pseudo太长”）；//名称太长
}
//名字太短了
如果（长度<5）{
errorsPseudo.push（“Pseudo太短”）；//名称太短
}
//没有足够的[a-zA-Z]字符
if（valPseudo.replace（/[^A-Z]/gi，”）。长度<1）{
errorsPseudo.push（“Pseudo至少需要一个字母”）；//没有足够的[a-zA-Z]字符
}
//没有足够的[0-9]个字符
如果（valPseudo.replace（/[^0-9]/g，”）。长度<1）{
errorsPseudo.push（“Pseudo至少需要一个数字”）；//没有足够的[0-9]字符
}
//如果errorPseudo有值，则返回false；
如果（errorsPseudo.length>0）{
警报（errorsPseudo）；
console.log（“errorPseudo->fail”）；
返回false；
}
if（emailRegex.test（valEmail）==false）{
警报（“请输入有效电子邮件”）；
console.log（“电子邮件->失败”）；
返回false；
}
如果（！valPassword）{