使用 JavaScript 来验证 onblur 和按下提交时的表单

Question

我正在尝试使用 JavaScript 验证表单中的字段。当用户离开字段 (onblur) 和用户按下提交时，应验证这些字段。如果必填字段的验证以任何方式失败，则不应发送表单。

问题是我还有一个 JS 函数，如果验证成功，应该重写验证的字段之一，然后发送表单。

这是我的 HTML:

<head>
    <meta charset='UTF-8'>

    <script type="text/javascript" src="./library/checkcreateuser.js"></script>
    <script type="text/javascript" src="./library/hashcreateuser.js"></script>
</head>

<body>
    <div class="maindiv">
        <form name="createform" id="createform" onsubmit="return formhash();" action="#" method="post">
            <input type="text" name="email" id="email" onblur="checkEmail()" placeholder="E-postadress" maxlength="50" />
            <label for="email" id="labemail"></label><br />
            <input type="text" name="testemail" id="testemail" onblur="checkEmailConfirm()" placeholder="Bekräfta e-postadress" maxlength="50" /><br />
            <label for="testemail" id="labtestemail"></label><br />
            <br />
            ... other input fields that should be validated, not yet written ...
            <br />
            <input type="password" name="password" id="password" placeholder="Lösenord" maxlength="50" /><br />
            <label for="password" id="labpassword"></label><br />
            <input type="password" name="testpassword" id="testpassword" placeholder="Bekräfta lösenord" maxlength="50" /><br />
            <label for="testpassword" id="labtestpassword"></label><br />
            <br />
            <input type="submit" placeholder="Registrera" onclick="validateForm()"><br />
        </form>
    </div>
</body>

这是我的 javascript 验证：

function checkEmail() {
    var validemail = true;

    var email = document.getElementById("email");

    var divided = email.split("@");

    var divlen = divided.length;

    if (divlen != 2) {
        validemail = false;
        document.getElementById("labemail").innerHTML = "Felaktig e-postadress";
    } else {
        document.getElementById("labemail").innerHTML = "<font color='#00cc00'>Korrekt epostadress</font>";
    }

    // More code to validate Email to come

    return validemail;
}

function checkEmailConfirm() {
    var validtestemail = true;

    var email = document.getElementById("email");
    var testemail = document.getElementById("email");

    if (testemail != email) validtestemail = false;

    return validtestemail;
}


function validateForm() {
    var validform = true;
    var returnval = true;

    validform = checkEmail();
    if (validform == false) returnval = false;
    validform = checkEmailConfirm();
    if (validform == false) returnval = false;

    return returnval;
}

我的问题是当我离开电子邮件或测试电子邮件字段时没有任何反应。

我的第二个问题是，如果我希望在任何验证失败时不提交表单，但在验证成功时使用名为 formhash() 的函数提交并散列，这是正确的方法吗？

编辑：使用 Chrome 调试器，出现以下错误：

Uncaught TypeError: undefined is not a function: checkcreateuser.js:9  
checkEmail: checkcreateuser.js:9  
onblur: newuser.php:16

Answer 1

要检查您在电子邮件和测试电子邮件中输入的值，您应该使用：

  var email = document.getElementById("email").value;
    var testemail = document.getElementById("testemail").value;// then use split on these values.

如果您将使用

var email = document.getElementById("email");//you will get error may be like split is not a function or something similar.

使用 JavaScript 来验证 onblur 和按下提交时的表单

Using JavaScript to validate form both onblur and when pressing submit

html

javascript

forms

validation

onblur