我目前正在开发一个我正在进行的Web开发课程的项目,我必须为营销产品创建一个注册页面并将用户详细信息添加到数据库中。我已经掌握了基本代码,但在与老师交谈后,我需要在网站上添加某种形式的数据验证。我已经尝试在HTML5中根据需要标记输入字段以及使用单独的JavaScript Validator,但是如果我提交表单,那么我的PHP脚本进程没有验证数据就无效。
我的目标是直接在表单上验证数据,以便错误消息显示在表单本身而不是单独的页面上。我目前检查了我的PHP代码,以便在数据库中查询已经存在的电子邮件并终止脚本并回显错误,但它在另一个页面上执行此操作。
以下是我到目前为止使用JavaScript验证程序的代码。我还在学习PHP和HTML,所以我迷失了我还能尝试的其他方法。有人可以帮忙吗?
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<title>Registration</title>
<script src="scripts/gen_validatorv4.js" type="text/javascript"></script>
</head>
<body>
<div id="register">
<fieldset style="width:30%"><legend>Registration Form</legend> <!-- Give the table a width of 30% and a title of Registration Form -->
<table border="0"> <!-- Add border to table -->
<tr>
<form method="POST" action="registration.php" id="register"> <!-- Use POST to submit form data to registration.php -->
<td>First Name</td><td> <input type="text" name="firstname" ></td> <!-- Input field for First Name -->
</tr>
<tr>
<td>Last Name</td><td> <input type="text" name="lastname" ></td> <!-- Input field for Last Name -->
</tr>
<tr>
<td>Address 1</td><td> <input type="text" name="address1" ></td> <!-- Input field for Address 1 -->
</tr>
<tr>
<td>Address 2</td><td> <input type="text" name="address2"></td> <!-- Input field for Address 2 -->
</tr>
<tr>
<td>City</td><td> <input type="text" name="city" ></td> <!-- Input field for City -->
</tr>
<tr>
<td>State</td><td> <input type="text" name="state" ></td> <!-- Input field for State -->
</tr>
<tr>
<td>Zip Code</td><td> <input type="text" name="zipcode" ></td> <!-- Input field for Zip Code -->
</tr>
<tr>
<td>Phone Number</td><td> <input type="text" name="phonenumber" ></td> <!-- Input field for Phone Number -->
</tr>
<tr>
<td>Email</td><td> <input type="text" name="email" ></td> <!-- Input field for Email -->
</tr>
<tr>
<td>Sign up to marketing emails?</td><td> <input type="radio" name="marketingaccept" value="yes"></td> <!-- Radio button to be checked if user wants to sign up for marketing emails -->
</tr>
<td><input id="button" type="submit" name="submit" value="Register"></td> <!-- Submit button -->
</form>
<script type="text/javascript">
var frmvalidator = new Validator("register");
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("firstname","req","Please provide your first name");
frmvalidator.addValidation("email","req","Please provide your email address");
frmvalidator.addValidation("email","email","Please provide a valid email address");
frmvalidator.addValidation("lastname","req","Please provide your last name");
frmvalidator.addValidation("address","req","Please provide your address");
</script>
</tr>
</table>
</fieldset>
</div>
</body>
</html>
PHP代码
<?php
define('DB_HOST', 'localhost'); // Define database host
define('DB_NAME', 'andrewha_fhsuproject1'); // Define database name
define('DB_USER','*******'); // Define database username
define('DB_PASSWORD','********'); // Define database password
$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error()); // Connect to host or present an error if connection fails
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error()); // Connect to database or present an error if connection fails
function newregister() // Create function newregister()
{
$firstname = trim($_POST['firstname']); // Grab data from the first name field and trim excess white space
$lastname = trim($_POST['lastname']); // Grab data from the last name field and trim excess white space
$address1 = trim($_POST['address1']); // Grab data from the address1 name field and trim excess white space
$address2 = trim($_POST['address2']); // Grab data from the address2 name field and trim excess white space
$city = trim($_POST['city']); // Grab data from the city field and trim excess white space
$state = trim($_POST['state']); // Grab data from the state field and trim excess white space
$zipcode = trim($_POST['zipcode']); // Grab data from the zipcode field and trim excess white space
$phonenumber = trim($_POST['phonenumber']); // Grab data from the phonenumber field and trim excess white space
$email = trim($_POST['email']); // Grab data from the email field and trim excess white space
$marketingaccept = $_POST['marketingaccept']; // Check to see whether the marketingaccept radio button is checked
$sql="SELECT email FROM RegisteredUsers WHERE email='".$email."'"; // Look through existing emails to prevent duplication
$resul=mysql_query($sql); // Perform above query
$num = mysql_num_rows($resul); // Check above query to see if any rows match
if ($num !=0){ // If a match is found...
die("Sorry, you can only register once!."); // ...the script is killed and an error is presented.
} else // If no match is found, the script continues.
$query = "INSERT INTO RegisteredUsers (firstname,lastname,address1,address2,city,state,zipcode,phonenumber,email,marketingaccept) VALUES ('$firstname','$lastname','$address1','$address2','$city','$state','$zipcode','$phonenumber','$email','$marketingaccept')"; // Create variable to insert Grabbed data to database table and corresponding columns
$data = mysql_query ($query)or die(mysql_error()); // Run above query or kill the script if an error is presented
if($data) // Verify $data was run
{
header('Location: thankyou.html'); // Redirect to thankyou.html
exit(); // End script
}
}
if(isset($_POST['submit'])) // Check to see if submit button was hit...
{
newregister(); // ...and go to newregister()
}
?>
答案 0 :(得分:0)
我不知道你是否低估或误解了验证的结果,如果我在这里啰嗦,请原谅我。
您在客户端上的验证正是如此 - 它只会验证客户端是否满足某些条件。一旦数据被发送到服务器,没有验证/清理,您就有可能篡改和破坏您的数据库,或者更糟。
例如,可以完全跳过客户端验证,只需在地址栏中输入地址,或者通过假装是将数据发送到服务器的Web浏览器的脚本输入。
上面编写代码的方式,服务器将接收数据,并且可以通过单个输入框设计(相当容易)删除数据库中的所有数据,或等待服务器配置,可能会破坏您的服务器
stackoverflow上的其他文章应该有助于更详细地讨论这个主题。我只是做了一个快速搜索,找到了这个:What's the best method for sanitizing user input with PHP?阅读一些答案。
现在......关于验证表单数据,我建议你使用jquery。它是一个javascript添加库(意思是它完全用javascript编写)但它是跨浏览器兼容的(在某些浏览器中javascript如何处理数据的变化因此你的普通javascript可能或可能不适用于所有浏览器。但是代码用jquery将适用于所有浏览器。)
验证表单数据的简单性可以通过添加
来完成class =“required”
输入表单中的每个输入标记。
然后,使用jquery,您可以执行类似以下内容的操作
// e will contain input field names of input tags that require but are missing data
var e=new Array();
// Get all input boxes with class "required", check the data input
// if the input length is less than one character in length, it
// will add the id tag to the "e" array.
$("input.required").each(function(){
if( $(this).val().length<1 )
{
e.push( $(this).prop("id") );
}
});
// If e array has more than zero elements, it means more than zero input
// input tags are missing data and thus an alert is shown
if( e.length>0 )
{
alert( "The following data fields are missing data:\n"+e.join(", ") );
}