个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 02:29:30 25 4
gpt4 key购买 nike

我对 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而不检查验证吗？

最佳答案

您尝试按如下方式获取名称长度: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>

关于javascript - 基于基本 HTML-Javascript 的表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48797791/

25 4 0
文章推荐： javascript - routerLink 使用参数进行路由不起作用
文章推荐： javascript - 使用 JavaScript 验证表单语句上的选择字段不起作用
文章推荐： javascript - 获取要替换的独立正斜杠，并用 span 标签包围
文章推荐： javascript - 添加了 metatagscheck.com 未拾取的元标记
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com