验证表格

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的所有函数/ doom /文档的链接以及你在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属性。