简单Javascript表单验证长度.(element.value.length<2）

Simple Javascript Form Validate Length. (element.value.length<2)

本文关键字：length lt value element 表单 Javascript 验证 简单      更新时间：2023-09-26

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

一切都很好，就在我开始摆弄UserName上的CheckLength函数之前。如果UserName的长度小于2(element.value.length < 2(，我希望表单在提交时不要为"return true;"。

现在它仍在将我重定向到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.
};

}

不管怎样，您都会返回真正的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 );
}

这里有一个你可以摆弄的演示

编辑：正如@user3091574在他们的回答中指出的，您的代码还有另一个问题：您的checkLength变量没有返回true或false，因此像if (checkLength(UserName))一样检查它不会返回任何内容(或者永远是false，我相信-没有测试这部分(。因此，如果长度大于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.
}

这是最新的小提琴演示

您必须在代码中返回"false"，这样就不会触发提交操作。

代码必须如下所示：

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

您的Check方法不返回任何内容(它只弹出一个警告框(
所以if语句中的代码永远不会被执行，因为checkLength不会返回任何内容
更改您的检查方法

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