js表单验证错误 显示错误_PHP表单验证：显示错误

js表单验证错误 显示错误

There are many possible ways to show the user they have entered incorrect information on a form. Asterisks are common, but when doing server-side validation I prefer to use something with a little more visual impact.

有很多可能的方法来向用户显示他们在表单上输入了不正确的信息。 星号很常见，但是在进行服务器端验证时，我更喜欢使用视觉效果更强的东西。

First, we are continuing on from our last lesson: we should have both a form.html page and a formhandler.php page. Take the code for the form from the first page, and place if as the result of finding an error in formhandler.php:

首先，我们从上一课开始 ：我们应该同时有一个form.html页面和一个formhandler.php页面。 从第一页获取表单的代码，然后将其放置在formhandler.php中 ，以查找错误：

<?php if ($errorflag) { ?>
	<form method="post" action="formhandler.php">
		<fieldset>
			<legend>Please enter your information</legend>
			<label for="firstname" accesskey="f">First name</label>
			<input type="text" name="firstname" id="firstname" size="30">
			<label for="postalcode" accesskey="p">Postal code</label>
			<input type="text" name="postalcode" id="postalcode" size="9">
			<label for="email" accesskey="e">eMail address</label>
			<input type="email" name="email" id=email" size="50">
			<label for="province" accesskey="t">Province / Territory</label>
			<select name="province" id="province">
				<option value="" selected>-- select one --
				<option value="AB">Alberta
				<option value="BC">British Columbia
				<option value="MB">Manitoba
				<option value="NB">New Brunswick
				<option value="NL">Newfoundland and Labrador
				<option value="NS">Nova Scotia
				<option value="NT">Northwest Territories
				<option value="NU">Nunavut
				<option value="ON">Ontario
				<option value="PE">Prince Edward Island
				<option value="QC">Québec
				<option value="SK">Saskatchewan
				<option value="YT">Yukon
			</select>
		<input type="submit" value="Go">
	</fieldset>
</form>
<?php } else {
	/* process the form information */
} ?>

Then upload both pages to a server and test them. You will find that filling out the form correctly on the form.html page and pressing Submit yields a blank page on formhandler.php, but entering an error presents the form again. The problem is that the form resets: all the information that the user enters is blank, which would be a very frustrating experience. Filling in the values the user entered to present them on formhandler.php is very easy:

然后将两个页面都上传到服务器并进行测试。 你会发现，form.html页面上正确填写表格并按下提交产量在空白页上formhandler.php，但再次输入一个错误呈现形式。 问题在于表单将重置：用户输入的所有信息均为空白，这将是非常令人沮丧的体验。 填写用户输入的值以将其显示在formhandler.php上非常容易：

<label for="firstname" accesskey="f">First name</label>
<input type="text" name="firstname" id="firstname" size="30" value="<?php echo $firstname; ?>">
<label for="postalcode" accesskey="p">Postal code</label>
<input type="text" name="postalcode" id="postalcode" size="9" value="<?php echo $postalcode; ?>">

(Note that we used the value of the original $postalcode variable, not the $temp_postalcode variable we generated for testing purposes).

(请注意，我们使用的是原始$postalcode变量的值，而不是为测试目的而生成的$temp_postalcode变量)。

The drop-down menu is a little tricker. There are a few ways of approaching it; whatever the solution, we must make the option that the user chose have the attribute selected. The simplest (albeit least efficient) method to achieve this is the following:

下拉菜单有点麻烦。 有几种解决方法。 无论采用哪种解决方案，我们都必须使用户选择的选项具有selected属性。 实现此目的的最简单(尽管效率最低)方法如下：

<select name="province" id="province">
<option value="" <?php if (!$province) { echo 'selected'; } ?>>
-- select one --
<option value="AB" <?php if ($province == "AB") { echo 'selected'; } ?>>
Alberta
<option value="BC" <?php if ($province == "BC") { echo 'selected'; } ?>>
British Columbia

Now the form on formhandler.php will present the information the user originally entered. Next, we have to show which fields are incorrect. My preferred method is to write an embedded style for formhandler.php:

现在， formhandler.php上的表单将显示用户最初输入的信息。 接下来，我们必须显示哪些字段不正确。 我的首选方法是为formhandler.php编写嵌入式样式：

.error { background: red; }

As we have individual variables to track errors for each field, we can use those to present the class appropriately:

由于我们有单独的变量来跟踪每个字段的错误，因此我们可以使用这些变量来适当地显示class ：

<label for="firstname" accesskey="f">First name</label>
<input type="text" name="firstname" id="firstname" size="30" value="<?php echo $firstname; ?>" 
	class="<?php if ($errorfirstname) { echo "error"; } ?>">
<label for="postalcode" accesskey="p">Postal code</label>
<input type="text" name="postalcode" id="postalcode" size="9" value="<?php echo $postalcode; ?>"
	class="<?php if ($errorpostalcode) { echo "error"; } ?>">

This also works for the drop-down: you just have to be careful to put the class in both the select tag and the first option, as different browsers will respond to each. If the field has an error, it will be highlighted in red; if not, class="" is still valid, and the appearance of the field will not change. Pressing the submit button on formhandler.php will re-submit the entered information to the same page; nothing will get by until the user has correctly entered information into all fields.

这对于下拉菜单也适用：您只需要小心地将class放在select标签和第一个option ，因为不同的浏览器会对它们进行响应。 如果该字段有错误，它将以红色突出显示；否则，将显示为红色。 如果不是，则class=""仍然有效，并且该字段的外观不会改变。 按下formhandler.php上的提交按钮，将输入的信息重新提交到同一页面； 直到用户在所有字段中正确输入信息后，任何事情都不会解决。

There are many possibilities for what we might want to happen if the user's information if it is all correct: sending the information via eMail or entering it into a database are two popular options, both of which we will come to in short order.

如果所有用户信息都是正确的，我们可能会发生很多事情： 通过电子邮件发送信息或将其输入数据库是两个流行的选择，我们很快就会发现这两种选择。

翻译自: https://thenewcode.com/230/PHP-Form-Validation-Showing-Errors

js表单验证错误 显示错误