onsubmit 属性不起作用

Question

您好，我尝试使用 onsubmit 属性验证我的表单。但它不起作用。这个故事中最有趣的事情 - 这仅在 2 天前正常工作。 表单标签：

<form action="../actionHandlers/registrationHandler.php" onsubmit="return validateRegistrationForm()" method="post" name="reg_form" enctype="multipart/form-data" id="reg_form">

验证函数：

function validateRegistrationForm() {
    var errors = [];
    if (document.forms['reg_form']['username'].value.length == 0) {
        var usernameErrorMessage = localStorage.getItem('emptyLoginError');
        errors.push(usernameErrorMessage);
    }
    if (document.forms['reg_form']['password'].value.length == 0) {
        var passwordErrorMessage = localStorage.getItem('emptyPasswordError');
        errors.push(passwordErrorMessage);
    }
    if (!validateEmail(document.forms['reg_form']['email'].value)) {
        var emailErrorMessage = localStorage.getItem('emailInvalidError');
        errors.push(emailErrorMessage);
    }
    if (errors.length > 0) {
        var htmlErrors = '';
        for (var i = 0; i < errors.length; i++) {
            htmlErrors += errors[i] + "<br />";
        }
        document.getElementById("error_message").innerHTML = htmlErrors;

        return false;
    } else {

        return true;
    }
}

我的错误在哪里？请帮忙）

验证电子邮件：

function validateEmail(email) {
var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

return pattern.test(email);
}

输入：

 <div>
            <label for="username" id="username_label"><?php echo $languageArray['USERNAME'] ?></label><span id="required_mark">*</span><br/>
            <input type="text" name="username" id="username_field" class="input_form_fields">
        </div>

        <div>
            <label for="password"><?php echo $languageArray['PASSWORD'] ?></label><span id="required_mark">*</span><br/>
            <input type="password" name="password" id="password_field" class="input_form_fields">
        </div>

        <div>
            <label for="email"><?php echo $languageArray['EMAIL'] ?></label><span id="required_mark">*</span><br/>
            <input type="text" name="email" id="email_field" class="input_form_fields">
        </div>

Answer 1

试试这个代码，我已经测试过它和它的工作原理：

<form action="../actionHandlers/registrationHandler.php" onsubmit="return validateRegistrationForm()" method="post" name="reg_form" enctype="multipart/form-data" id="reg_form">

<div>
    <label for="username" id="username_label"><?php echo (isset($languageArray['USERNAME']) ? $languageArray['USERNAME'] : "email"); ?></label><span id="required_mark">*</span><br/>
    <input type="text" name="username" id="username_field" class="input_form_fields">
</div>

<div>
    <label for="password"><?php echo (isset($languageArray['PASSWORD']) ? $languageArray['PASSWORD'] : "email"); ?></label><span id="required_mark">*</span><br/>
    <input type="password" name="password" id="password_field" class="input_form_fields">
</div>

<div>
    <label for="email"><?php echo (isset($languageArray['EMAIL']) ? $languageArray['EMAIL'] : "email"); ?></label><span id="required_mark">*</span><br/>
    <input type="text" name="email" id="email_field" class="input_form_fields">
</div>
<input type="submit">
</form>

还有 JS：

function validateEmail(email) {
    var pattern = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;

    return pattern.test(email);
}


function validateRegistrationForm(e) {
    var errors = [];
    if (document.forms['reg_form']['username'].value.length == 0) {
        var usernameErrorMessage =  localStorage.getItem('emptyLoginError') ? localStorage.getItem('emptyLoginError') : "username error";
        errors.push(usernameErrorMessage);
    }
    if (document.forms['reg_form']['password'].value.length == 0) {
        var passwordErrorMessage = localStorage.getItem('emptyPasswordError') ? localStorage.getItem('emptyPasswordError') : "password error";
        errors.push(passwordErrorMessage);
    }
    if (!validateEmail(document.forms['reg_form']['email'].value)) {
        var emailErrorMessage = localStorage.getItem('emailInvalidError') ? localStorage.getItem('emailInvalidError') : "email error";
        errors.push(emailErrorMessage);
    }
    if (errors.length > 0) {
        var htmlErrors = '';
        for (var i = 0; i < errors.length; i++) {
            htmlErrors += errors[i] + "<br />";
        }
        if(document.getElementById("error_message")){

            document.getElementById("error_message").innerHTML = htmlErrors;
        }
        return false;
    } else {

        return true;
    }
}

我认为问题是由以下任何一种原因引起的：

1. localStorage.getItem 请注意，您甚至不检查密钥是否存在。
2. echo $languageArray['PASSWORD'] 再次，根本没有检查，虽然我确定它不是 php 错误，但在你回显之前检查它很好。
3. document.getElementById("error_message")，好吧，你使用innerHTML，但document.getElementById我的回报undefined。

结论：

代码应该可以工作。

但是：

你说它以前工作过，我想你已经以某种方式接触过 html，如果不是 html，请检查 localStorage 键。