javascript PHP 使用客户端和服务器端验证而不使用第三方代码
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10716436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PHP Using both client side and server side validation WITHOUT using 3rd party code
提问by kathleenie.xx
EDIT: thanks for all the help. Received an email saying that we didn't need the client side so I scrapped that idea in favor of actually completing the assignment on time.
编辑：感谢所有的帮助。收到一封电子邮件，说我们不需要客户端，所以我放弃了这个想法，转而按时完成任务。
Before you ask, Yes this is assignment work. No I am not looking for someones complete code. I am a beginner will practically no experience in HTML/PHP/javascript, but this is the second part of the assignment so I already have some of my own code from the first part, which was so very easy in comparison to this part. The task doesn't specifically say we have to use client side validation, but I feel it would be good practice.
在你问之前，是的，这是作业。不，我不是在寻找某人的完整代码。我是一个初学者，几乎没有 HTML/PHP/javascript 方面的经验，但这是作业的第二部分，所以我已经有了第一部分的一些我自己的代码，与这部分相比，这非常容易。该任务并没有特别说明我们必须使用客户端验证，但我觉得这将是一个很好的做法。
I need someone to clearly show me how to use both client and server side validation. I already have the javascript validation, but I can modify it as it displays an alert box for every error. I CANNOT use 3rd party code like jQuery which apparently everyone on the internet likes to use, and the course I am doing doesn't like to actually teach us any useful content so we are all on our own.
我需要有人清楚地向我展示如何使用客户端和服务器端验证。我已经有了 javascript 验证，但我可以修改它，因为它会为每个错误显示一个警报框。我不能使用像 jQuery 这样的 3rd 方代码，显然互联网上的每个人都喜欢使用，而且我正在做的课程不喜欢实际教给我们任何有用的内容，所以我们都靠自己。
The data from the form will then be entered into a database through MySQL (which I am not looking forward to doing), and from viewing the minimal information from w3schools on the topic, I understand that I have to POST the form to itself.
然后，表单中的数据将通过 MySQL 输入到数据库中（我并不期待这样做），并且通过查看 w3schools 提供的有关该主题的最少信息，我知道我必须将表单发布到自身。
The form itself is pretty simple: contains name, DoB, email, postcode etc. My current .js uses alpha only, num only, date format, email format, radio button and check box checks and every field is tested to make sure it isn't empty.
表单本身非常简单：包含姓名、DoB、电子邮件、邮政编码等。我当前的 .js 仅使用 alpha、num、日期格式、电子邮件格式、单选按钮和复选框检查，并且每个字段都经过测试以确保它是不是空的。
I suppose what I am after is a complete tutorial on how to do this. My internet searches have been unfruitful, but at least I still have a week till this is due.
我想我所追求的是关于如何做到这一点的完整教程。我的互联网搜索没有结果，但至少我还有一周的时间来完成。
Any help is appreciated, but simple and clear help would be even more so. I will continue to prowl the internet for help until then and post back here if I find useful stuff for anyone else with the same problem (which I'm sure is 90% of my class.....)
任何帮助都值得赞赏，但简单明了的帮助更是如此。在那之前，我将继续在互联网上寻找帮助，如果我找到对其他有同样问题的人有用的东西（我确信这是我班级的 90%.....）
Thanks in advance.
提前致谢。
回答by UltraInstinct
Read the code below. Hope inline comments answer your question.
阅读下面的代码。希望内嵌评论回答您的问题。
add_record.php
add_record.php
<?php
if(isset($_POST['name'])) {
//get post data
$name = trim($_POST['person_name']);
$email = trim($_POST['email']);
$message = trim($_POST['message']);
//This is server-side check!
if (strlen($name) > 10){
echo "FAILED! You tried to submit a name which is greater than 10 chars."
}else{
//insert to the database here..
//and send out a "success message or render HTML
echo "SUCCESS!";
}
}else {
echo "Error! Proper parameters were not provided!";
}
a.html
一个.html
<html>
<head>
<script type="text/javascript">
function checkForm(){
//client side (JS) validation. This happens before submitting.
var name = document.forms[0].person_name.value;
if (name.length > 10){
alert("Name is too long");
return false;
}
//do some more checks here..
//return true if all checks have passed, false otherwise.
//the return value of this function is checked before submit. The form is submitted only when this function returns a true.
return true;
}
</script>
</head>
<body>
<form action="add_record.php" method="POST" onsubmit="return checkForm()">
Name: <input type="text" name="person_name"/>
Email: <input type="text" name="email"/>
Message: <input type="text" name="message"/>
<input type="submit"/>
</form>
</body>
</html>
EDIT: As mplungjan pointed out, it is not a good idea to have a field named "name" inside forms. The form object itself might have a "name" which might conflict.
编辑：正如 mplungjan 指出的那样，在表单内有一个名为“name”的字段并不是一个好主意。表单对象本身可能有一个可能冲突的“名称”。
回答by Ja?ck
Since it's homework, I should at least point you to a few resources:
既然是作业，我至少应该给你指出一些资源：
Client side
客户端
For validation:
验证：
- http://www.9lessons.info/2009/03/perfect-javascript-form-validation.html(form validator)
- http://www.javascriptkit.com/javatutors/re.shtml(regular expression guide)
- http://www.9lessons.info/2009/03/perfect-javascript-form-validation.html（表单验证器）
- http://www.javascriptkit.com/javatutors/re.shtml（正则表达式指南）
Don't jump to AJAX straight away, that's advanced material. Get the basics done first and just let the form submit to PHP (i.e. page refreshes and PHP redraws the form if there were any validation issues).
不要立即跳转到 AJAX，那是高级材料。首先完成基础工作，然后让表单提交给 PHP（即，如果存在任何验证问题，则页面刷新和 PHP 重新绘制表单）。
Server side
服务器端
For validation: http://www.php.net/filter- examples
验证：http: //www.php.net/filter-示例
For database work: http://www.php.net/pdo- tutorial
对于数据库工作：http: //www.php.net/pdo-教程
回答by Moritz
For server side validation, you would send the form data to a php page using method="post", then check for correct format. Something like:
对于服务器端验证，您可以使用 method="post" 将表单数据发送到 php 页面，然后检查格式是否正确。就像是：
<form action="validate.php" method="post">
<!-- form fields -->
</form>
In validate.php, you use $_POST["var_name"], where var_name is the name of your input fields, to check the data. So, for example, something like:
在validate.php 中，您使用$_POST["var_name"]（其中var_name 是输入字段的名称）来检查数据。因此，例如，类似于：
$age = $_POST["age"];
if (ctype_digit($age) && $age > 0) {
// correct format
}
It seems like you already have client side validation figured out. I'm not quite sure if I understood your problem correctly, though - Let me know where specifically you are having problems and I'll try to help.
似乎您已经弄清楚了客户端验证。不过，我不太确定我是否正确理解了您的问题 - 请告诉我您具体在哪里遇到问题，我会尽力提供帮助。
![javascript 从 ListView 的 ItemInvoked 事件以编程方式设置输入框的焦点 [Windows 8 Metro HTML5]](/res/img/loading.gif)