onsubmit属性不起作用

onsubmit attribute not work

本文关键字：不起作用 属性 onsubmit      更新时间：2023-09-26

你好，我正在尝试使用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>

试试这个代码，我已经测试了它及其工作：

<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键。

相关文章：