我在做一个注册页面。它需要姓名，密码，电子邮件，性别，国籍，出生日期和其他事项。
我做了注册，很不错。但我需要添加验证，这是我到目前为止所做的：
<?php include("config.php"); ?>
<!DOCTYPE html>
<html lang="en">
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<!-- JavaScript -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/validation.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#datepicker').datepicker({
dateFormat:'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: '-90:+0',
maxDate: '+0'
});
});
</script>
</head>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_italic_600.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_italic_400.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<script type="text/javascript" src="js/html5.js"></script>
<![endif]-->
<?php $error_messages = array(
'T1' => 'Please enter a Name to proceed.',
'T2' => 'Please enter a valid Email Address to continue.',
'T3' => 'Please enter your Message to continue.'
);
?>
</head>
<body id="page2">
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="wrapper">
<h1><a href="index.html" id="logo">Air Lines</a><span id="slogan">International Travel</span></h1>
<div class="right">
<nav>
<ul id="top_nav">
<li><a href="index.html"><img src="images/img1.gif" alt=""></a></li>
<li><a href="index-4.html"><img src="images/img2.gif" alt=""></a></li>
<li class="bg_none"><a href="#"><img src="images/img3.gif" alt=""></a></li>
</ul>
</nav>
<nav>
<ul id="menu">
<li><a href="index.php">Home</a></li>
<li id="menu_active" ><a href="LSU.php">Login/sign up</a></li>
<li><a href="V&M.php">Vision and mission</a></li>
<li><a href="contact.php">Contacts</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
</div>
<div class="main">
<div id="banner"></div>
</div>
<!-- header -->
<div class="main">
<!-- content -->
<section id="content">
<article class="col1">
<div class="pad_1">
<h2>Login</h2>
<form id="form_1" action="login.php" method="post">
<div class="wrapper">
User Name:
<div class="bg"><input type="text" name="LogIn_Name" class="input input1" value="Enter your name" onblur="if(this.value=='') this.value='Enter your name'" onfocus="if(this.value =='Enter your name' ) this.value=''"></div>
</div>
<div class="wrapper">
Password:
<div class="bg"><input type="password" name="LogIn_Pass" class="input input1" value="Enter your password" onblur="if(this.value=='') this.value='Enter your password'" onfocus="if(this.value =='Enter your password' ) this.value=''"></div>
</div>
<div class="wrapper">
<h2 id="coq"> <a href="Forget.php">Forget Password</a></h2>
<input type="submit" class="button2" value="GO">
</div>
</form>
<h2> </h2>
</div>
</article>
<article class="col2 pad_left1">
<h2>Registration</h2>
<div class="wrapper">
<figure class="left marg_right1"></figure>
<p>
<form id="form_1" action="" method="post">
<div class="wrapperr" >
<?php
$username = $_POST["T1"];
$password = $_POST["T2"];
$repassword = $_POST["T3"];
$email = $_POST["T4"];
$gender = $_POST["T5"];
$Cou = $_POST["T6"];
$DO= $_POST["T7"];
$passport= $_POST["T8"];
$phone= $_POST["T9"];
{
if((strlen($username)<3)){
echo "The username is too short"."</br>";
if((strlen($gender)<3)){
echo "Gender"."</br>";
}
if((strlen($Cou)<2)){
echo "The CO too short"."</br>";
}
if((strlen($phone)<5)){
echo "The phone is too short"."</br>";
}
if((strlen($password)<5)){
echo "The password is too short"."</br>";
}
}
else{
if($password == $repassword){
$chec = mysql_query("SELECT * FROM register WHERE name='$username'");
if(strlen($chec['name'])>0){
echo "The username '$username' already exists";
}
else{
$check_variable=stripos($email,"@");
if($check_variable){
$password=md5($password);
mysql_query("INSERT INTO register (name,password,email,gender,country,DOB,phone,passport) VALUES ('$username','$password','$email','$gender','$Cou','$DO','$phone','$passport')");
echo "Registration Successful .. Click <a href='index.php'> here </a> to home";
}
else{
echo "email is invalid";
}
}
}
else{
echo "The password in both field doesn't match.";
}
}
}
?>
</div> <div class="wrapper">
Name:
<div class="bg"><input type="text" name="T1" class="input input1" value="Enter your name" onblur="if(this.value=='') this.value='Enter your name'" onfocus="if(this.value =='Enter your name' ) this.value=''"></div>
</div>
<div class="wrapper">
Password:
<div class="bg"><input type="password" name="T2" class="input input1" value="Enter the password" onblur="if(this.value=='') this.value='Enter the password'" onfocus="if(this.value =='Enter the password' ) this.value=''"></div>
</div>
<div class="wrapper">
Confirm password:
<div class="bg"><input type="password" name="T3" class="input input1" value="Confirm the password" onblur="if(this.value=='') this.value='Confirm the password'" onfocus="if(this.value =='Confirm the password' ) this.value=''"></div>
</div>
<div class="wrapper">
e-mail:
<div class="bg"><input type="text" name = "T4" class="input input1" value="Enter your e-mail" onblur="if(this.value=='') this.value='Enter your e-mail'" onfocus="if(this.value =='Enter your e-mail' ) this.value=''"></div>
</div>
<div class="wrapper">
Gender:
<div class="bg">
<td>
<input type="radio" name="T5" value="Male">
Male
</td><td>
<input type="radio" name="T5" value="Female">
Female</td>
</div>
</div>
<div class="wrapper">
NATIONALITY:
<div class="bg"><input type="text" name="T6" class="input input1" value="Enter your country" onblur="if(this.value=='') this.value='Enter your country'" onfocus="if(this.value =='Enter your country' ) this.value=''"></div>
</div>
<div class="wrapper">
<div class="wrapper">
Passport number:
<div class="bg"><input type="text" name="T8" class="input input1" value="Enter your passport number" onblur="if(this.value=='') this.value='Enter your passport number'" onfocus="if(this.value =='Enter your passport number' ) this.value=''"></div>
</div>
<div class="wrapper">
Date of birth:
<div class="wrapper">
<div class="bg left"><input type="text" name="T7" class="input input2" value="mm/dd/yyyy " onblur="if(this.value=='') this.value='mm/dd/yyyy '" onfocus="if(this.value =='mm/dd/yyyy ' ) this.value=''" id="datepicker" >
<br/><span id="bdayInfo"></span>
</div>
<div class="bg right"></div>
</div>
</div>
Phone number:
<div class="wrapper">
<div class="bg left"><input type="text" name="T9" class="input input2" value="" onblur="if(this.value=='') this.value=''" onfocus="if(this.value =='' ) this.value=''"></div>
<div class="bg right"></div>
</div>
</div>
<div class="wrapper">
<p> </p>
<input type="submit" class="button2" name="Go" value="GO">
</div>
</form>
</p>
</div>
<p> </p>
<h2> </h2>
</article>
</section>
<!-- / content -->
</div>
<div class="body2">
<div class="main">
<!--footer -->
<footer>
Website template designed by <a href="http://www.templatemonster.com/" target="_blank" rel="nofollow">www.templatemonster.com</a><br>
3D Models provided by <a href="http://www.templates.com/product/3d-models/" target="_blank" rel="nofollow">www.templates.com</a>
</footer>
<!-- / footer -->
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
答案 0 :(得分：0)
始终首先验证服务器端，即在PHP中（这是需要的点）。
然后添加JavaScript验证。 不是必需的，但已添加以提高用户的体验。任何javascript都可以被环绕（避免），所以如果你没有PHP备份，那么你就会让自己处于开放状态。
注意，我不是说不添加JS验证，只是先添加PHP，然后再添加JS。有时您会发现可以同时添加两者的库/框架。
回到您的代码：错误似乎是您在显示错误后检查错误。所以它会失败。
按如下方式重构代码：
header('location: '); exit();]重定向到结果/感谢页面。基本上，首先处理数据，最后输出。
一旦有效，然后进行jQuery验证（如评论中所示）。这很不错。
答案 1 :(得分：-1)
HTML 5有一堆内置的验证工具，你可以使用jQuery或Javascript来进一步增强它。我不是在新页面上验证变量的忠实粉丝，特别是当我们可以完全阻止页面加载时。一定要查看某种客户端验证，而不是发布到PHP页面。
W3Schools有一篇关于Javascript验证的文章：http://www.w3schools.com/js/js_form_validation.asp
jQuery链接已在上面的评论中给出。
如果Javascript不是您的专长，请尝试这样的事情。它是预先构建的，并具有一些很好的功能。最重要的是它是免费的。 http://www.javascript-coder.com/html-form/javascript-form-validation.phtml