名字、姓氏和电子邮件地址的JavaScript表单验证不显示任何内容

JavaScript form validation for first name, last name and email address is displaying nothing

本文关键字：验证 表单 显示 任何内 JavaScript 电子邮件地址 名字      更新时间：2023-09-26

我只是在复制我的代码：

HTML

<form id='test'>
Name *
    <input id="lname" type="text"><span id="wronglname" class="error">*This is a required field</span>
        Name *
    <input id="name" type="text"><span id="wrongname" class="error">*This is a required field</span>
Email*
    <input id="email" type="text"><span id="wrongemail" class="error">* Wrong Email Address</span>
    <div>
        <input type="submit" value="Submit">
    </div>
</form>

Javascript

function ValidateForm() {
    var hasError = false;
    if (document.getElementById('lname').value == "") {
        document.getElementById('lwrongname').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongname').style.display = "none";   
    }
        if (document.getElementById('name').value == "") {
        document.getElementById('wrongname').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongname').style.display = "none";   
    }
    if (document.getElementById('email').value.search(/^[a-zA-Z]+([_'.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(['.-]?[a-zA-Z0-9]+)*('.[a-zA-Z]{2,4})+$/) == -1) {
        document.getElementById('wrongemail').style.display = "inline";
        hasError = true;
    } else {
        document.getElementById('wrongemail').style.display = "none";   
    }
    return !hasError;
}

document.getElementById('test').onsubmit = ValidateForm;

CSS

.error {
    display:none;
    color:red;
}

我根本没有得到任何响应，每当我通过chrome检查javascript控制台时，它也显示我没有错误，我不太确定我的编码出了什么问题，有人能帮我吗？

这是您的错误：

if (document.getElementById('lname').value == "") {
        document.getElementById('lwrongname').style.display = "inline";
        hasError = true;
    }

注意，document.getElementById('lwrongname')应该是document.getElementById('wronglname')。

相关文章：