javascript - 如何让两个 JavaScript 引用对同一个 HTML 表单起作用？

Question

我在使用 JavaScript 验证 HTML 表单时遇到问题。单独使用时，它们各自起作用，但组合起来却不起作用。

这有效:

// Make sure the e-mail address is valid
function validateEmail(mailform,email) { 
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = document.forms[mailform].elements[email].value;
    if(reg.test(address) == false) {
        alert('E-mail not valid');
        return false;
    } 
}

表单中的属性:

onsubmit="javascript:return validateEmail('mailform', 'email');"

这有效:

// Make sure the message is long enough
function validateBody(mailform,mailbody) { 
    var msg = document.forms[mailform].elements[mailbody].value.length;
    if (msg < 3) {
        alert('Too hort');
        return false;
    }
}

表单中的属性:

onsubmit="javascript:return validateBody('mailform', 'mailbody');"

但这不起作用:

// Make sure the e-mail address is valid AND that the message is long enough
function validateForm(mailform,email,mailbody) { 
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    var address = document.forms[mailform].elements[email].value;
    var msg = document.forms[mailform].elements[mailbody].value.length;
    if(reg.test(address) == false) {
        alert('Please enter a valid e-mail address');
        return false;
    } else if (msg < 3) {
        alert('Text too hort');
        return false;
    }
}

表单中的属性:

onsubmit="javascript:return validateForm('mailform', 'email', 'mailbody');"

为什么？

正如我所说，它们各自工作，但即使作为不同的功能，它们也不能一起工作。

Answer 1

如果您有两个可用的函数，为什么不使用它们呢？

function validateForm(mailform,email,mailbody) { 
var addressValid = validateEmail(mailform,email);
var bodyValid = validateBody(mailform,mailbody);
return addressValid && bodyValid
}

如果两个测试都为 true，return 才会返回 true。此方法的优点是(并且可能有效)它易于扩展且易于维护。

如果您只想在出现两个错误时发出一个警报，那么您需要测试 addressValid 并仅在需要时调用 bodyValid。