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;
    }
}

我认为这个问题的方式是由以下任何原因引起的：

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

<强>结论：

代码应该有用。

<强>可是：

你说之前有效，我认为你已经以这种或那种方式触及了html，如果它不是html检查 localStorage 键。

onsubmit属性不起作用

1 个答案: