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

【问题标题】：Basic HTML-Javascript based form validation基于 HTML-Javascript 的基本表单验证
【发布时间】：2018-02-14 23:15:31
【问题描述】：

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

【问题讨论】：

JavaScript 中的任何语法错误都会导致表单提交。第一个错误是 'if (name_length
谢谢@jeff。了解控制台。让事情变得如此简单。

标签： javascript html function validation

【解决方案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>

【讨论】：

这仍然对我抛出错误，似乎只检查名称输入。

【解决方案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 验证，您可以使用非常简短的代码进行大量工作。

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

【讨论】：

谢谢阿坎什。你能解释一下 $('#userForm') 是做什么的吗？它究竟是如何将表单链接到脚本中的函数的？
当然，$("#userForm") 选择你的表单作为 jquery 的 DOM 对象，这样你就可以执行验证、操作、事件......