Question

我是js和html的新手，有人可以帮我理解为什么我的页面被重定向到下一页，即使验证失败而且我的“validate（）”函数只返回FALSE！

我创建了一个以名称，年龄，电子邮件，州等作为输入的表单，理想情况下应该验证它们，然后继续下一页。

以下是代码：

<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(){
    var name=document.getElementById('name_id').value;
    var email=document.getElementById('email_id').value;
    var age=document.getElementById('age_id').value;
    var state=document.getElementById('state_id').value;
    var address=document.getElementById('address_id').value;

    //checking conditions for name
    if (name_length<10)
    {
        return false;
    }
    if(!(/\w \w/.test(name2)))
    {
        alert("Please enter name correctly!");
        return false;
    }
    if(/\d/.test(name2))
    {
        alert("Name cannot contain digits");
        return false;
    }

    //checking conditions for email
    var index_of_at = name.indexOf('@');
    if(index_of_at == -1)
    {
        alert("Please enter a valid email address");
        return false;
    }
    else
    {
            var befor_at = email.substring(0,index_of_at);
            var after_at =email.substring(index_of_at+1,email.length);
            if(!(/[!-$?]/.test(before_at)))
            {
                if((/(\w|\d|.)/).test(before_at))
                    continue;
                else
                {
                alert("Please enter a valid email address");
                return false;
            }
        }
        else
        {
            alert("Please enter a valid email address");
            return false;
        }


} 

//checking conditions for age
if(/\w/.test(age))
{
    alert("Please enter a valid Age");
    return false;
}
else
{
    if(age>100 || age<0)
    {
        alert("Please enter age btetween 0 and 100");
        return false;
    }
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html"     method="post" onsubmit="return validate();">
  Name:<br>
  <input type="text" name="name" id="name_id"><br>
  Email:<br>
  <input type="text" name="email" id="email_id"><br>
  Age:<br>
  <input type="text" name="age" id="age_id"><br>
  State:<br>
  <input type="text" name="state" id="state_id"><br>
  Address:<br>
  <input type="text" name="address" id="address_id"><br>
  Photo: <br>
  <input type="img" name="display-picture" id=photo_id>  
  <br> <br> <br>
  <input type="submit" value ="Submit">
</form>
</body>
</html>

有人可以帮我解释为什么我的代码会直接重定向到handle.html而不检查验证吗？

Answer 1

您正在尝试获取名称的长度，如下所示：name_length这是一个错字，但是，您有另一个错误：continue关键字

if((/(\w|\d|.)/).test(before_at))
    continue;
    ^
else

更改为：

if((/(\w|\d|.)/).test(before_at)) {
    //continue; You need to modify this part.
} else {
    alert("Please enter a valid email address");
    return false;
}

您需要了解continue关键字必须放在循环中，即：for-loop。

<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(e){

    var name=document.getElementById('name_id').value;
    var email=document.getElementById('email_id').value;
    var age=document.getElementById('age_id').value;
    var state=document.getElementById('state_id').value;
    var address=document.getElementById('address_id').value;

    //checking conditions for name
    if (name.length<10)
    {
      alert('Please enter name correctly!');
        return false;
    }
    if(!(/\w \w/.test(name2)))
    {
        alert("Please enter name correctly!");
        return false;
    }
    if(/\d/.test(name2))
    {
        alert("Name cannot contain digits");
        return false;
    }

    //checking conditions for email
    var index_of_at = name.indexOf('@');
    if(index_of_at == -1)
    {
        alert("Please enter a valid email address");
        return false;
    }
    else
    {
            var befor_at = email.substring(0,index_of_at);
            var after_at =email.substring(index_of_at+1,email.length);
            if(!(/[!-$?]/.test(before_at)))
            {
                if((/(\w|\d|.)/).test(before_at)) {
                    //continue;
                } else
                {
                alert("Please enter a valid email address");
                return false;
            }
        }
        else
        {
            alert("Please enter a valid email address");
            return false;
        }


} 

//checking conditions for age
if(/\w/.test(age))
{
    alert("Please enter a valid Age");
    return false;
}
else
{
    if(age>100 || age<0)
    {
        alert("Please enter age btetween 0 and 100");
        return false;
    }
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html"     method="post" onsubmit="return validate(event);">
  Name:<br>
  <input type="text" name="name" id="name_id"><br>
  Email:<br>
  <input type="text" name="email" id="email_id"><br>
  Age:<br>
  <input type="text" name="age" id="age_id"><br>
  State:<br>
  <input type="text" name="state" id="state_id"><br>
  Address:<br>
  <input type="text" name="address" id="address_id"><br>
  Photo: <br>
  <input type="img" name="display-picture" id=photo_id>  
  <br> <br> <br>
  <input type="submit" value ="Submit">
</form>
</body>
</html>

Answer 2

如果你想用html和javascript开始学习web开发，我建议你学习最简单的方法。对于javascript验证，请检查此jquery validation

<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
</head>
<body>
 <h1 style = "text-align : center;"> Enter Details </h1>
 <form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" name="userForm" id="userForm" method="post">
 Name:<br>
 <input type="text" name="name" id="name_id"><br>
 Email:<br>
 <input type="text" name="email" id="email_id"><br>
 Age:<br>
 <input type="text" name="age" id="age_id"><br>
 State:<br>
 <input type="text" name="state" id="state_id"><br>
 Address:<br>
 <input type="text" name="address" id="address_id"><br>
 Photo: <br>
 <input type="img" name="display-picture" id=photo_id>  
 <br> <br> <br>
 <input type="submit" value ="Submit">
 </form>
<script type="text/javascript">
$('#userForm').validate({
    rules: {
        name :{
            required : true
        },
        email: {
            required : true,
            email : true,
        },
        age: {
            required: true,
            minlength:18, // Can define minimum age  
            maxlength:60  // max page
        }
    },
    submitHandler: function(form) {
        alert("All Well") ; 
        $("#userForm").submit(); // form tag id to sumit the form
        return false ;
    }
});
</script>
</body>
</html>

使用jquery验证，您可以使用非常短的手动代码进行大量工作。

希望这会有所帮助，一切顺利。

基于HTML-Javascript的基本表单验证

2 个答案: