{"id":25469,"date":"2021-06-07T09:23:00","date_gmt":"2021-06-07T06:23:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25469"},"modified":"2021-10-17T20:25:04","modified_gmt":"2021-10-17T17:25:04","slug":"html-muodon-vahvistus-persiljaa-kayttaen","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/html-muodon-vahvistus-persiljaa-kayttaen\/","title":{"rendered":"HTML-muodon vahvistus persiljaa k\u00e4ytt\u00e4en"},"content":{"rendered":"

Etsitk\u00f6 validointien soveltamista HTML-lomakkeellesi? Asiakaspuolen tarkistukset auttavat varmistamaan, ett\u00e4 kaikki lomakekent\u00e4t on t\u00e4ytetty ja oikeassa muodossa. Se auttaa k\u00e4ytt\u00e4ji\u00e4 korjaamaan virheelliset tiedot v\u00e4litt\u00f6m\u00e4sti. Verkkosivustolomakkeissasi on aina oltava asiakaspuolen tarkistukset. Jos ohitat sen ja k\u00e4yt\u00e4t vain palvelinpuolen tarkistusta, se viiv\u00e4stytt\u00e4\u00e4 lomakkeen l\u00e4hett\u00e4mist\u00e4 virheiden varalta.<\/p>\n

Persilja<\/a> on hy\u00f6dyllinen lomakkeiden validointikirjasto, joka on helppo integroida. T\u00e4m\u00e4 kirjasto tarjoaa paremman k\u00e4ytt\u00f6liittym\u00e4n verrattuna oletusarvoisiin HTML5-vahvistuksiin. Sinun on kirjoitettava vain muutama lausunto ja olet valmis. Persilja tarjoaa runsaasti vaihtoehtoja, joiden avulla voit laajentaa mukautettuja validointeja. En aio k\u00e4sitell\u00e4 kutakin vaihtoehtoa. T\u00e4m\u00e4n opetusohjelman tarkoituksena on tutustuttaa persiljaan ja n\u00e4ytt\u00e4\u00e4, miten perusvahvistuksia k\u00e4ytet\u00e4\u00e4n. He voivat tutustua heid\u00e4n dokumentointiinsa ja tutustua kaikkiin kirjaston tarjoamiin ominaisuuksiin.<\/p>\n

T\u00e4t\u00e4 opetusohjelmaa varten aion luoda yksinkertaisen lomakkeen, jossa on muutama kentt\u00e4, kuten nimi, s\u00e4hk\u00f6postiosoite, sukupuoli jne. Kaikki lomakekent\u00e4t ovat pakollisia, ja k\u00e4yt\u00e4mme vahvistuksia k\u00e4ytt\u00e4m\u00e4ll\u00e4 Persiljaa lomakkeellamme.<\/p>\n

Lomakkeen vahvistamiseksi persiljaa k\u00e4ytt\u00e4m\u00e4ll\u00e4 meid\u00e4n on sis\u00e4llytett\u00e4v\u00e4 sen JS-tiedosto. Teen sen CDN: ll\u00e4.<\/p>\n

Persilja suosittelee k\u00e4ytt\u00e4m\u00e4\u00e4n virheviesteiss\u00e4 omaa muotoilua. Mutta testaustarkoituksiin voit k\u00e4ytt\u00e4\u00e4 CSS-tiedostoa, joka on saatavilla t\u00e4ll\u00e4 linkill\u00e4<\/a>.<\/p>\n

Kuinka k\u00e4ytt\u00e4\u00e4 persiljaa<\/h3>\n

Demotarkoitusta varten aion luoda lomakkeen Bootstrapilla. Joten sis\u00e4llyt\u00e4n Bootstrapin k\u00e4ytt\u00e4m\u00e4ll\u00e4 CDN: \u00e4\u00e4 yhdess\u00e4 persiljatiedostojen kanssa. Otan mukaan my\u00f6s jQueryn, koska persilja riippuu siit\u00e4.<\/p>\n

<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/css\/bootstrap.min.css\" \/>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/parsleyjs.org\/src\/parsley.css\" \/>\n<div class=\"container\">\n\u00a0\u00a0\u00a0\u00a0<form class=\"form-horizontal\" id=\"signup_form\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputFirstName\" class=\"col-sm-2 control-label\">First Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"inputFirstName\" name=\"first_name\" placeholder=\"First Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputLastName\" class=\"col-sm-2 control-label\">Last Name<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"text\" class=\"form-control\" id=\"inputLastName\" name=\"last_name\" placeholder=\"Last Name\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label for=\"inputEmail3\" class=\"col-sm-2 control-label\">Email<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"email\" class=\"form-control\" id=\"inputEmail3\" name=\"email\" placeholder=\"Email\" required>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"col-sm-2 control-label\">Gender<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"gender\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"radio\" name=\"gender\" value=\"male\" required> Male\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"radio\" name=\"gender\" value=\"female\" required> Female\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label class=\"col-sm-2 control-label\">Skills<\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-4\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"skills\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"checkbox\" name=\"skills[]\" value=\"php\" required> PHP\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"checkbox\" name=\"skills[]\" value=\"mysql\" required> MySQL\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class=\"col-sm-offset-2 col-sm-10\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<button type=\"submit\" class=\"btn btn-primary\">Sign in<\/button>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n<\/div>\n\u00a0\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.3\/js\/bootstrap.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/parsley.js\/2.9.2\/parsley.min.js\"><\/script>\n<script type=\"text\/javascript\">\n\u00a0\u00a0\u00a0\u00a0jQuery('#signup_form').parsley();\n<\/script><\/code><\/pre>\n
Yll\u00e4 olevaan koodiin olen sis\u00e4llytt\u00e4nyt kaikki vaaditut JS- ja CSS-tiedostot CDN: \u00e4\u00e4 k\u00e4ytt\u00e4en. Lopuksi k\u00e4ytin $('#signup_form').parsley();<\/code>miss\u00e4 #signup_form on lomaketunnus. Nyt kun napsautat L\u00e4het\u00e4-painiketta suoraan, se n\u00e4ytt\u00e4\u00e4 virheet alla olevan kuvakaappauksen mukaisesti.<\/p>\n
\"HTML-muodon<\/a><\/p>\n
Kun kaikki virheet on korjattu, Parsley antaa sinun l\u00e4hett\u00e4\u00e4 lomakkeen, jonka otat palvelinpuolen k\u00e4sittely\u00e4 varten.<\/p>\n
Toivottavasti ymm\u00e4rr\u00e4t HTML-lomakkeen validoinnin k\u00e4ytt\u00e4m\u00e4ll\u00e4 persiljaa. Jaa ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h3>\n