简单的Javascript表单验证长度。 （element.value.length＆2）

Question

我对javascript语言很陌生，我在简单的html输入表单上遇到表单验证问题：

在我开始使用CheckLength上的UserName函数搞砸之前，一切正常。如果return true;的长度小于2（UserName），我希望表单不提交“element.value.length < 2”。

现在它仍然会将我重定向到http://google.dk，如果我填写所有输入并单击发送（即使UserName小于2）。

HTML：

<form name="form1" action="http://google.dk"  method="POST" id="form1">

                <label for="name">username:</label>
                <input type="text" name="username" id="username" /><br>
                <label for="phone">Phone:</label>
                <input type="text" name="phone" id="telephone" /><br>
                <label for="email">Email:</label>
                <input type="text" name="email" id="emailadress" /><br>
                <label for="password">Password:</label>
                <input type="text" name="password" id="Password" /><br>
                <label for="description">Description:</label>
                <textarea rows="4" cols="50" name="description" id="description"></textarea><br>

                <input type="submit" id="btn" name="btn" value="Send" />

        <p id="errormessage"></p>
</form>

JAVSCRIPT：

window.onload = function () {

//HTML form variables
var form1 = document.getElementById("form1");
//HTML inputs variables
var UserName = document.getElementById("username");
var Phone = document.getElementById("telephone");
var eMail = document.getElementById("emailadress");
var PassWord = document.getElementById("Password");
var Description = document.getElementById("description");

// Functions
var checkLength = function(element) {
    if(element.value.length < 2){
        alert("Brugernavnet du har indtastet er for kort! Mindst 2 tegn.");
    }
};

UserName.onblur = function(){
    if(checkLength(UserName)){
    return false;
    }
};

form1.onsubmit = function(){

    //Username
    if( UserName.value == "" ){
        alert( "Skriv venligst et brugernavn!" );
        UserName.focus() ; //Sætter fokus på det bestemte inputfelt.
        return false; //return false; gør at den sender dataen videre ved onSumbit.
    }

    //Phone
    if( Phone.value == "" ){
        alert( "Udfyld venligst dit telefonnummer!" );
        Phone.focus() ;
        return false;
    }

    //Email
    if( eMail.value == "" ){
        alert( "Udfyld venligst din mailadresse!" );
        eMail.focus() ;
        return false;
    }

    //Password
    if( PassWord.value == "" ){
        alert( "Skriv venligst en adgangskode!" );
        PassWord.focus() ;
        return false;
    }

    //Description
    if( Description.value == "" ){
        alert( "Lav venligst en beskrivelse af dig selv!" );
        Description.focus() ;
        return false;
    }

    if(checkLength(UserName)){
    return false;
    }

    alert( "Succes!" ); //Hvis alle overstående felter er udfyldt, vil der komme en alertbox op med teksten "Succes!".
    return( true ); //Hvis alle overstående felter er udfyldt, vil den sende dataen videre ved onSubmit.
};


}

Answer 1

您必须在代码中返回“false”，以便不会触发提交操作。

代码必须如下所示：

var checkLength = function(element) {
    if(element.value.length < 2){
        alert("Brugernavnet du har indtastet er for kort! Mindst 2 tegn.");
        return false;
    }
};

Answer 2

无论如何，您都会返回true onsubmit，因此它会一直提交。

查看代码的最后部分：

return( true );

你必须为每个错误检查做一个else if，或者更好的是，如果我是你，我会创建一个名为error的变量，或者只是如果没有错误，则为0。

你可以这样做：

form1.onsubmit = function(){

var error = 0; // set this here

然后在检查错误的每个if语句中，您可以将其设置为1。

//Username
if( UserName.value == "" ){
    //...
    error = 1;
}

然后在最后，替换这个......

alert( "Succes!" );
return( true );

......有了......

if (error == 0) {
    alert( "Succes!" );
    return( true );
}

<强> Here is a demo you can fiddle with.

已编辑：正如@ user3091574在回答中指出的那样，您的代码还有另一个问题：您的checkLength变量未返回 true 或< em> false 因此像if (checkLength(UserName))那样检查它不会返回任何东西（或者总是假的，我相信 - 没有测试这部分）。因此，如果长度大于2，则必须添加 true ，如果不是，则必须添加 false ，那么它将起作用。

var checkLength = function(element) {
    if(element.value.length < 2){
        alert("Brugernavnet du har indtastet er for kort! Mindst 2 tegn.");
        return false;
    } else {
        return true;
};

此外，您必须更改以下检查，就像现在checkLength(UserName)返回 true 一样，我们很乐意提交表单：

UserName.onblur = function(){
    if(checkLength(UserName)){
        return true;
    }
};

// ...

if(checkLength(UserName)){
    alert( "Succes!" ); //Hvis alle overstående felter er udfyldt, vil der komme en alertbox op med teksten "Succes!".
    return true; //Hvis alle overstående felter er udfyldt, vil den sende dataen videre ved onSubmit.
}

<强> Here is the updated fiddle demo.

Answer 3

你的Check方法没有返回任何内容（它只会弹出一个警告框）
因此if语句中的代码永远不会执行，因为checkLength不会返回任何内容 改变你的检查方法

var checkLength = function(element) {
if(element.value.length < 2){
   return false;
}else{
   return true;
 }
};