javascript - 验证表

Question

我想在javascript中检查表单是否为空，通过简单的编程，例如使所有功能都可以工作，但是在oop中，我想使用oop来实现这一点(用于学习)，它不起作用，为什么？

<script type="text/javascript">

function Contact()
{
    this.first_name=document.getElementById('first_name').value;
    this.last_name=document.getElementById('last_name').value;
    this.email_adre=document.getElementById('email_adre').value;
    this.message=document.getElementById('message').value;


    function checked()
    {   
        if ((this.first_name == "")||(this.last_name == "")||(this.email_adre == "") || (this.message == ""))
            {
                alert('please write all the forms');
                return false;
            }
        else 
            return true;
    }
}

var inc = new Contact();
</script>

这是我的表格。

<form action="submited.html" method="POST" id="contact_form" onsubmit=" return inc.checked();">

    <label for='FirstName'>First Name: </label>
    <input type="text" name="firstname" id="first_name" maxlength="40">
    <br>
    <br>
    <label for='LastName'>Last Name: </label>
    <input type="text" name="lastname" id="last_name" maxlength="40">
    <br>
    <br>
    <label for='EMail'>Email adre:</label> 
    <input type="email" name="email" id="email_adre" maxlength="80">
    <br>
    <br>
    <label for='Message'>Message:</label>
    <br>  
    <textarea name="message" rows="10" cols="30" maxlength="200" wrap="hard" id="message"></textarea>
    <br><br><br>

    <input type="submit" value="Submit" class="submit"> <input type="reset" value="Reset" class="reset">

</form>

错误是什么？你能解释一下除了浏览器测试语法或其他错误之外编译javascript代码的其他方法吗？您可以给我一个链接，其中包含有关 oop 的所有函数/厄运/文档以及您可以在 javascript 中执行的所有操作吗？提前致谢。

Answer 1

您至少有两个问题:

1. 您在加载脚本时而不是提交表单时从表单收集数据
2. 您永远不会将 checked 分配给对象的属性

固定版本类似于:

function checked() {
    if ((this.first_name == "") || (this.last_name == "") || (this.email_adre == "") || (this.message == "")) {
        alert('please write all the forms');
        return false;
    } else {
        return true;
    }
}

function Contact() {
    this.first_name = document.getElementById('first_name').value;
    this.last_name = document.getElementById('last_name').value;
    this.email_adre = document.getElementById('email_adre').value;
    this.message = document.getElementById('message').value;    
}

Contact.prototype.checked = checked;

function bind_event_handlers(evt) {
    function check_form(evt) {
        var inc = new Contact();
        if (!inc.checked()) {
            evt.preventDefault();
        }
    }
    document.querySelector('form').addEventListener('submit', check_form);
}

addEventListener("load", bind_event_handlers);

请注意，addEventListener 替换 onsubmit 属性。