Fatal编程技术网
  • javascript/
  • 简单的Javascript表单验证长度。（元素值长度<；2）

简单的Javascript表单验证长度。（元素值长度<；2）

javascript forms validation

简单的Javascript表单验证长度。（元素值长度<；2）,javascript,forms,validation,Javascript,Forms,Validation,我对javascript语言非常陌生，在一个简单的html输入表单上进行表单验证时遇到了一些问题： 就在我开始在UserName上乱搞CheckLength函数之前，一切都很正常。如果用户名的长度小于2（element.value.length

我对javascript语言非常陌生，在一个简单的html输入表单上进行表单验证时遇到了一些问题：

就在我开始在
UserName
上乱搞
CheckLength
函数之前，一切都很正常。如果
用户名
的长度小于2（
element.value.length<2
），我希望表单在提交时不要“
返回true；
”

现在它仍然将我重定向到，如果我填写所有输入并单击发送（即使
用户名
小于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>



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


}




用户名：


电话：


电邮：


密码：


说明：






JAVSCRIPT:


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



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


}



window.onload=函数（）{
//HTML表单变量
var form1=document.getElementById（“form1”）；
//HTML输入变量
var UserName=document.getElementById（“用户名”）；
var Phone=document.getElementById（“电话”）；
var eMail=document.getElementById（“emailAddress”）；
var PassWord=document.getElementById（“密码”）；
var Description=document.getElementById（“Description”）；
//功能
var checkLength=函数（元素）{
if（element.value.length<2）{
警报（“Brugernavnet du har indtaset er for kort！Mindst 2 tegn.”）；
}
};
UserName.onblur=函数（）{
如果（检查长度（用户名））{
返回false；
}
};
form1.onsubmit=函数（）{
//用户名
如果（UserName.value==“”）{
警惕（“Skriv venligst et brugernavn！”）；
UserName.focus（）；//Sætter fokus pådet bestemte inputFeel。
return false；//return false；发送数据时的gør。
}
//电话
如果（Phone.value==“”）{
警报（“Udfyld venligst dit telefonnummer！”）；
Phone.focus（）；
返回false；
}
//电子邮件
如果（eMail.value==“”）{
警报（“Udfyld venligst din mailadresse！”）；
eMail.focus（）；
返回false；
}
//密码
如果（PassWord.value==“”）{
警惕（“斯克里夫·文利格斯特·恩阿德冈科德！”）；
PassWord.focus（）；
返回false；
}
//描述
如果（Description.value==“”）{
警觉（“挖到自己的地方！”；
Description.focus（）；
返回false；
}
如果（检查长度（用户名））{
返回false；
}
警报（“成功！”）//Hvis alle oversående felter udfyldt，vil der komme en alertbox op med teksten“成功！”。
return（true）；//Hvis alle oversående felter er udfyldt，vil den sende dataen vide on submit。
};
}

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

代码必须如下所示：


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



form1.onsubmit = function(){

var error = 0; // set this here



var checkLength=函数（元素）{
if（element.value.length<2）{
警报（“Brugernavnet du har indtaset er for kort！Mindst 2 tegn.”）；
返回false；
}
};

您在提交时返回的是true
onsubmit
，因此它将始终提交

请看一下代码的最后部分：


return( true );


您必须对每个错误检查执行
否则如果
，或者更好的是，如果我是您，我将创建一个名为
error
的变量，或者其他什么，只有在没有错误的情况下，该变量才会为0

你可以这样做：


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



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




编辑：正如@user3091574在他们的回答中指出的，您的代码还有另一个问题：您的
checkLength
变量没有返回true或false，因此检查它就像
if（checkLength（UserName））
不会返回任何东西一样（或者我相信总是false，没有测试这部分）。因此，如果长度大于2，则必须添加true；如果长度不大于2，则必须添加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;
};



您的检查方法不会返回任何内容（它只会弹出一个警报框）

因此if语句中的代码永远不会执行，因为checkLength不会返回任何内容

改变你的检查方法


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



var checkLength=函数（元素）{
if（element.value.length<2）{
返回false；
}否则{
返回true；
}
};

他已经在这里这么做了：
if（checkLength（UserName））{return false；}
（见结尾…）@webeno但是方法checkLength（UserName）没有返回任何东西（true或false）谢谢你的回复。它不是100%工作（如果我填写了所有的输入（即使“username<2”），它仍然通过了。但是在最后，我将它改成了以下似乎有效的方式：if（checkLength（username））{alert（“Succes！”）；return true；}else{return false；}