Write a regular expression that would match the following kinds of patterns. You can use the site Rubular to test your regex.
Note that there are multiple solutions for each of the regex expressions, but here are some possible ones:
/^[abcdf][+-]?$/i
/^[acgt]+$/i
/^\d{5}(-\d{4})?$/
/^\d{4}(-?\d{4}){3}$/
/^[-]?\d+(\.\d+)?$/
/^$[1-9]\d{2,}\.\d{2}$/
/^[a-z]*[aeiou][a-z]*[aeiou][a-z]*$/i
In this exercise, you will use regex with PHP to display photos of... animals. You can find the starter files and images in this hybrids.zip
folder.
The hybrids.html
page uses hybrids.js
(completed for you) to make GET requests to regexhybrids.php
and display images on the page using the plain text results. When #submit-one button
is clicked, a request will be made to regexhybrids.php
with a query parameter of animal
and a value of whatever the user input into the #animal
text input box. If the user clicks on #submit-all
instead, a request will be made passing animal=all
as the query parameter. The response will then be used to populate the #results div
with the resulting images.
Modify regexhybrids.php
to use regular expressions so that it will return a plain text result of all images matching the GET parameter (each on their own line) if given any animal
query parameter (other than "all"). If passed animal=all
, it should instead return a plain text result of all images in the images/
folder. You may find preg_match
useful here for matching the image names against a given regular expression.
In this exercise, you will use regex to validate an online pizzeria order using HTML, JS, and PHP, and explore different methods for provideing a user-friendly experience. You may download all of the starter files in this epizzeria.zip
folder. There are three different parts to this exercise, each which serve to demonstrate different validation methods. To keep things organized, we have provided you nearly-identical starter code in the three "part-*" folders located in epizzeria.zip
.
Before we start implementing validation of our page, what do you think should be true about the user's selections before considering the order successful (make sure to take a look at the epizzeria.html
output)? After you have brainstormed as a class some, continue down for more instructions.
Here are some validation criteria which you will now implement for the E-Pizzeria form. If you thought of others, you may also add them for additional practice. These criteria will be used for validation using HTML, JavaScript, and then PHP in the subsequent sub-exercises below.
Use HTML form validation to ensure the criteria is met, using the starter code in the part-i-html-validation
folder of your unzipped epizzeria
folder. HTML5 includes various features to validate user input without client-side verification (JavaScript) or server-side verification (PHP). These are often included as part of a <form>
element, but we will just use <input>
tags in the ways we're already familiar with.
You should use the pattern
attribute to require certain regex patterns in the HTML order form. You should also you the required
attribute to require an input item to be filled before submitting.
Next, we will get some practice using client-side validation to ensure the criteria is met. Edit part-ii-js-validation/validation.js
in the unzipped epizzeria
folder to validate the user's order with the same criteria from Part I, but without HTML5 pattern attributes (there is a fresh template for you to use in your part-ii-js-validation/epizzeria.html
. Your JS code should display helpful error messages of your choice in the #order-results div
at the top of the page when the submit
button is clicked and the input does not pass the criteria.
Use server-side PHP validation to ensure the criteria is met. When the submit button is clicked, you should send a POST request to epizzeria.php
(which we have provided starter code for in the part-iii-php-validation
folder) and send the various selected options as an array of parameters. We have also provided most of the JS code for you in part-iii-php-validation/epizzeria.js
but you may need to edit some of it after finishing epizzeria.php
.
Your PHP script should then process the array and verify their validity based on the same criteria as Part I and Part II, but send a plain text response back to the client whether or not their order was "successful". Since this is just a practice exercise, we aren't worrying about storing orders as external data, just verifying that the POST parameters are valid using PHP.