javascript - onsubmit 属性不起作用

Question

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

<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 请注意，您甚至没有检查该 key 是否存在。
2. echo $languageArray['PASSWORD'] 再次根本没有检查，尽管我确定它不是 php 错误，但在 echo 之前检查一下是有好处的.
3. document.getElementById("error_message")，好吧，您使用innerHTML，但document.getElementById我返回undefined。

结论:

代码应该可以工作。

但是:

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