Valideren van de gegevens die door gebruikers met jQuery en PHP

Valideren onze client-side vorm is erg eenvoudig geworden als gevolg van jQuery, maar om er zeker van zijn dat de input van de gebruiker is geleverd net zoals ze verwachtten is een goed idee om de check-out van de server side dupliceren.

Maar als we gebruik van AJAX om te communiceren met de server (en dus met PHP bijvoorbeeld) kunnen we besluiten om direct delegeren alle controles naar de server.

Voorbereiding van het optreden

Voor ons voorbeeld hebben we natuurlijk nodig hebben jQuery, PHP en jQuery Ui van de gelovigen

Op het moment van schrijven is de jQuery UI pakket bevat versie 1.8.10 en 1.4.4 van de jQuery script, dus niet toegeven aan de verleiding om de nieuwe jQuery 1.5 die ik heb beschreven gebruik hier en "zijn inhoud" van de voorgenomen bundel.

Kies een onderwerp-neutrale thema roller Ui :

We gaan dan om te downloaden wat we nodig hebben:

In het pakket worden gedownload. "Js" nuttig jquery en jquery-ui-1.4.4.min.js-1.8.10.custom.min.js in de map js, css map in de dezelfde naam en we kunnen onszelf bevrijden ontwikkelings-bundel map en bestand als index.html

We structuur allemaal in een boom lijn en dat is het resultaat laat zien het als Eclipse :

Zoals je kunt zien in het beeld dat we hebben een index.html bestand toegevoegd in de wortel, een index.js in een js en css in style.css, hebben we ook een map "php" met een bestand in: u remote.php verzorgen van server-side validatie.

Het scenario

Afbeeldingen in dit artikel om een eenvoudige vorm voor de overname van de gebruiker gegevens te maken om ze op te slaan in een hypothetische database van contacten.

Zullen we ons richten op de validatie van de velden ingevoerd door de gebruiker en niet de daadwerkelijke opslag van gegevens, die buiten onze doeleinden, dan is het genoeg om in de juiste positie van een database call voor de opname van de verworven informatie. We zullen gebruik maken van jQuery UI-component dialoogvenster waarschuwt de gebruiker laten zien, dus heb je iets meer visueel aantrekkelijke, moderne klassiekers alert door de browser.

• <<
• 1
• 2
• 3
• 4
• >>