基于HTML-Javascript的基本表单验证
[英]Basic HTML-Javascript based form validation
问题描述
我是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吗？
2 个解决方案
解决方案1
1 2018-02-14 23:21:24
您尝试按以下方式获取名称的长度： 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
0 2018-02-14 23:49:24
如果您想开始学习使用html和javascript的Web开发，我建议您学习最简单的方法。 对于javascript验证，请检查此jquery验证
<!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 验证
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.