2

拜托，有人可以告诉我，我在语法上做错了什么吗？

问题从this.form.onsubmit我得到的声明开始this.initData is not a function。

谢谢。

var Contact_Form = function(element){
this.form = element;
this.errors = new Array();
this.invalid = new Array();
this.inSent = false;
this.name = new String();
this.email = new String();
this.message = new String();

this.initData = function()
{
        this.name = this.getElementValue('contact-name');
        this.email = this.getElementValue('contact-email');
        this.message = this.getElementValue('contact-message');
}

this.form.onsubmit = function(event)
{
    event.preventDefault();

    this.initData();
    if(this.verifyData())
        this.send();
}

this.verifyData = function()
{
    if(!this.isNameLength())
        this.setError('name', 'Zadejte, prosím, jméno dlouhé maximálně 30 znaků.');

    if(this.isProperEmail())
    {
        if(!this.isEmailLength())
            this.setError('email', 'Váš e-mail smí obsahovat maximálně 50 znaků.');
    }
    else
        this.setError('email', 'Zadejte, prosím, email v korektním formátu.');

    if(!this.isMessageLength())
        this.setError('name', 'Zadejte, prosím, zprávu v rozsahu 1-999 znaků.');

    this.doInvalidFields();

    if(0 == this.errors.length)
        return true;
    return false;
}
this.doInvalidFields = function()
{
        if(this.invalid.length > 0)
        {
                for(var invalid in this.invalid)
                    this.getElement(invalid).setAttribute('aria-invalid', true);
        }
}
this.setError = function(field, message)
{
    this.errors.push(message);

    this.invalid.push(field);
}
this.getElementValue = function(element) {
        return this.getElement(element).value;
}
this.getElement = function(element) {
    return document.getElementById(element);
}
this.getElementName = function() {
    return this.getElement('contact-name');
}
this.getElementEmail = function() {
    return this.getElement('contact-email');
}
this.getElementMessage = function() {
    return this.getElement('contact-message');
}
this.isNameLength = function(){
        return this.isLength(this.name, 1, 30);
}
this.isEmailLength = function(){
        return this.isLength(this.email, 1, 50);
}
this.isMessageLength = function(){
        return this.isLength(this.email, 1, 999);
}
this.isProperEmail = function()     {
        return this.email.match(/^(?:\w){1,100}@{1}(?:\w){1,100}(?:.){1}(?:\w){1,10}$/ig);
}
this.isLength = function isLength(string, _min, _max) {
    if(string.length >= _min && string.length <= _max)
        return true;
    return false;
}
}

window.onload = function()
{
    new Contact_Form(document.forms[0]);
}
4

2 回答 2

1

问题是它this不是继承的，并且在每个函数内部都有不同的值。

然后，使用

var Contact_Form = function(element){
    /* ... */
    var that = this;
    /* Here this===that */
    this.form.onsubmit = function(event)
    {
        /* Here this===that.form */
        event.preventDefault();
        that.initData();
        if(that.verifyData())
            this.send();
    }
    /* ... */
}
于 2013-11-10T03:17:41.327 回答
0

this指的form是onsubmit处理程序中的。您可以分配this给局部变量，或将处理程序绑定到正确this的 with Function.prototype.bind，即：

this.form.onsubmit = function(event) {
    event.preventDefault();

    this.initData();
    if(this.verifyData())
        this.send();
}.bind(this)

或与jQuery.proxy

this.form.onsubmit = $.proxy(function(event) {
    event.preventDefault();

    this.initData();
    if(this.verifyData())
        this.send();
}, this);

这两个示例都在调用处理程序时强制this函数的上下文成为 a 的实例Contact_Form

于 2013-11-10T03:47:50.363 回答