{"id":411,"date":"2024-04-19T00:56:44","date_gmt":"2024-04-19T00:56:44","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=411"},"modified":"2024-04-22T00:51:32","modified_gmt":"2024-04-22T00:51:32","slug":"411","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/04\/19\/411\/","title":{"rendered":"\ud3fc \uc720\ud6a8\uc131 \ud655\uc778\ud558\uae30(Form validation)(3),\uc774\uba54\uc77c\uccb4\ud06c(Email check)"},"content":{"rendered":"\n

\uc774\ubc88\uc5d0\ub294 \uc774\uba54\uc77c\uc744 \uccb4\ud06c\ud558\uae30 \uc704\ud55c \ubd80\ubd84\uc785\ub2c8\ub2e4.
\uc774\uba54\uc77c,URL\ub4f1\uc774 \ubb38\uc790\uc5f4\uc758 \ud615\uc2dd\uc774 \uc815\ud655\ud55c\uc9c0 \uc5ec\ubd80\ub97c \ud655\uc778\ud558\uae30 \uc704\ud574\uc11c \uc815\uaddc\ud45c\ud604\uc2dd\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
\uc815\uaddc\ud45c\ud604\uc2dd\uc5d0 \ub300\ud55c \uc790\uc138\ud55c \uc124\uba85\uc740 \ub098\uc911\uc5d0 \ub2e4\ub8e8\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.
\uc774\ubc88\uc5d0\ub294 \ud65c\uc6a9\ubc29\ubc95\ub9cc \uc18c\uac1c\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.
This part is for checking email.
Regular expressions are used to check whether the format of email, URL, etc. strings is correct.
A detailed explanation of regular expressions will be covered later.
This time, we will only introduce how to use it.<\/p>\n\n\n\n

\ud558\ub298\uc0c9\uc73c\ub85c \uac15\uc870\ub41c \ubd80\ubd84\uc740 \uc0c8\ub86d\uac8c \ucd94\uac00\ub41c \ucf54\ub4dc \uc785\ub2c8\ub2e4.
\ubcf4\ub77c\uc0c9\uc73c\ub85c \uac15\uc870\ub41c \ubd80\ubd84\uc740 \ubd80\ud2b8\uc2a4\ud2b8\ub7a9 \ubd80\ubd84\uc785\ub2c8\ub2e4.
\ubd80\ud2b8\uc2a4\ud2b8\ub7a9\uc740 \ub514\uc790\uc778\uc5d0 \ud574\ub2f9\ud558\ub294 \ubd80\ubd84\uc73c\ub85c \uc0ad\uc81c\ub098 \uc624\ub958\uac00 \ubc1c\uc0dd\ud574\ub3c4 php\ud30c\uc77c \uc791\ub3d9\uc5d0 \uc601\ud5a5\uc744 \ubbf8\uce58\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.
\uc774\uc804\uc5d0 \uc124\uba85\ud588\ub358 \ubd80\ubd84\uc5d0 \ub300\ud55c \uc124\uba85\uc740 \uc0dd\ub7b5\ud569\ub2c8\ub2e4.
The part highlighted in light blue is the newly added code.
The part highlighted in purple is the bootstrap part.
Bootstrap is a design part and does not affect the operation of the PHP file even if it is deleted or an error occurs.
Descriptions of previously explained parts will be omitted.

1.Email \uac12 \uac00\uc838 \uc624\uae30(Get email values)<\/strong>
– HTML\ud3fc\uc5d0\uc11c \uc774\uba54\uc77c \uac12 \uac00\uc838\uc640\uc11c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4.
Get the email value from the HTML form and store it in a JavaScript variable.<\/p>\n\n\n\n

HTML\n<input type=\"text\" class=\"form-control\" id=\"email\" placeholder=\"ID@exmale.com\" name=\"email\" required><\/code><\/pre>\n\n\n\n
JAVASCRIPT\nconst frmEmail    = document.getElementById(\"email\").value;<\/code><\/pre>\n\n\n\n
2.\uc815\uaddc\ud45c\ud604\uc2dd \uc0ac\uc6a9\ud558\uae30(Using regular expressions)<\/strong>
– \uc774\uba54\uc77c \ud615\uc2dd\uc744 \uccb4\ud06c\ud558\uae30 \uc704\ud55c \uc815\uaddc\ud45c\ud604\uc2dd\uc744 \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4.
– HTML\uc5d0\uc11c \uac00\uc838\uc628 \uc774\uba54\uc77c \uac12\uc744 test\ud568\uc218\ub97c \uc774\uc6a9\ud574\uc11c \uc815\uaddc\ud45c\ud604\uc2dd\uacfc \uc77c\uce58\ud558\ub294 \ud655\uc778 \ud569\ub2c8\ub2e4.
– Save the regular expression to check the email format in a variable.
– Check whether the email value retrieved from HTML matches the regular expression using the JavaScript test function.<\/p>\n\n\n\n
const regex = \/^[\\w-]+(\\.[\\w-]+)*@([\\w-]+\\.)+[a-zA-Z]{2,3}$\/;\nconst emailCheck = regex.test(frmEmail); \n\n...\n\n          }else if(frmEmail == \"\"){\n            errorEmail.innerHTML =\"<p>Email\uc744 \uc785\ub825\ud558\uc138\uc694(Please Enter Your Email)<\/p>\";\n            return;\n           }else if(emailCheck == false){   \n            errorEmail.innerHTML =\"<p>\uc815\ud655\ud55c Email\uc744 \uc785\ub825\ud558\uc138\uc694(Please enter the correct Email)<\/p>\";       \n            return;\n\n...<\/code><\/pre>\n\n\n\n
3.\uc804\uccb4\ucf54\ub4dc(full code)<\/strong>
-\uc544\ub798\uc758 \ub9c1\ud06c\ub97c \ud1b5\ud574\uc11c \ud14c\uc2a4\ud2b8 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4
You can test it through the link below.
test : https:\/\/www.freelifemakers.org\/lec\/form4.php<\/a><\/p>\n\n\n\n
form4.php\n<?php\n\n\/* \n\ud3fc\uccb4\ud06c innerHTML\uc0ac\uc6a9\nform action name \uc9c0\uc815\ud558\uae30\n$_SERVER['PHP_SELF'] : \n\ud30c\uc77c\uc758 \uc804\uccb4 \uc704\uce58 \uacbd\ub85c \uac00\uc838\uc624\uae30Get the full location path of a file\n\nbasename($_SERVER['PHP_SELF']); : \n\ud30c\uc77c\uc774\ub984\ub9cc \uac00\uc838\uc624\uae30Get only file name\n*\/\n\n\/\/\ud30c\uc77c\uc774 \uc874\uc7ac\ud558\uc9c0 \uc54a\uc744 \uacbd\uc6b0 \ud3fc\ub124\uc784\uc740 form.php\n\/\/form.action.php\ud30c\uc77c\uc774 \uc874\uc7ac\ud558\uba74 form_action.php \ubcc0\uc218\uc5d0 \uc14b\ud305\n$fileName = \".\/form_action4.php\";\nif(!is_file($fileName)){\n    $form_action_name = basename($_SERVER['PHP_SELF']);\n}else{\n    $form_action_name = \".\/form_action4.php\";\n}\n?>\n\n<!DOCTYPE html>\n<html>\n    <head>\n    \u200b  <title>Bootstrap 5 webform<\/title>\n      <!--\uc774 \ubd80\ubd84\uc740 html\ucf54\uba58\ud2b8 \uc601\uc5ed This part is the html comment area,\ub9c8\uc784\ud0c0\uc785\uc124\uc815 Mime type settings\/\/-->\n      <meta charset=\"utf-8\">\n      <!-- \ubaa8\ubc14\uc77c\ud3f0 \uc2a4\ud06c\ub9b0 \uc635\uc158 Mobile phone screen options\/\/-->\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      <!--\ubd80\ud2b8\uc2a4\ud2b8\ub7a95 CDN\ubc29\uc2dd \ub9c1\ud06c Bootstrap 5 CDN method link\/\/-->\n      <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n      <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script><\/mark>\n\n      <!-- \ud3fc\uccb4\ud06c innerHTML\uacbd\uace0 \uba54\uc2dc\uc9c0 \ucd9c\ub825 -->\n      <!-- Form check innerHTML warning message output \/\/-->\n      <script>\n        function frmSubmit(){\n\n           \/\/name input box\uc5d0\uc11c \uac12\uc744 \uac00\uc838\uc624\uae30\n           \/\/Get value from name input box\n           const frmName     = document.getElementById(\"name\").value;\n           const frmEmail    = document.getElementById(\"email\").value;    <\/mark>                             \n           const frmPwd      = document.getElementById(\"pwd\").value;\n\n           \/\/\uc774\uba54\uc77c \ubc0f \uc6f9\uc0ac\uc774\ud2b8 \uc720\ud6a8\uc131\uac80\uc0ac\n           \/\/Regular expression for email validation\n           const regex = \/^[\\w-]+(\\.[\\w-]+)*@([\\w-]+\\.)+[a-zA-Z]{2,3}$\/;<\/mark>\n\n           \/\/\uc815\uaddc\ud45c\ud604\uc2dd\uacfc \ube44\uad50\ud558\uc5ec \uc774\uba54\uc77c\ud14c\uc2a4\ud2b8\n           \/\/Test the email against the regular expression\n           const emailCheck = regex.test(frmEmail); <\/mark>\n\n           \/\/\uc5d0\ub7ec\uba54\uc138\uc9c0 \ucd08\uae30\ud654\n           \/\/Reset error message\n           errorName.innerHTML = \"\";\n           errorEmail.innerHTML = \"\";           \n           errorPwd.innerHTML = \"\";\n           \n           \/\/\uac12\uc758 \uc874\uc7ac \uc5ec\ubd80\uccb4\ud06c ,\uacf5\ubc31\uc774\uba74 \uacbd\uace0\ucc3d \ub744\uc6b0\uae30\n           \/\/Check whether value exists, if blank, display warning window\n           if(frmName == \"\"){\n            errorName.innerHTML =\"<p>\uc774\ub984\uc744 \uc785\ub825\ud558\uc138\uc694(Please Enter Your Name)<\/p>\";\n            return;\n           }else if(frmEmail == \"\"){\n            errorEmail.innerHTML =\"<p>Email\uc744 \uc785\ub825\ud558\uc138\uc694(Please Enter Your Email)<\/p>\";\n            return;\n           }else if(emailCheck == false){   \n            errorEmail.innerHTML =\"<p>\uc815\ud655\ud55c Email\uc744 \uc785\ub825\ud558\uc138\uc694(Please enter the correct Email)<\/p>\";       \n            return; <\/mark>                                  \n           }else if(frmPwd == \"\"){\n            errorPwd.innerHTML =\"<p>\ud328\uc2a4\uc6cc\ub4dc\ub97c \uc785\ub825\ud558\uc138\uc694(Please Enter Your Password)<\/p>\";\n            return;           \n           }else{\n            frm.submit();\n           }\n        }\n      <\/script>\n\n    <\/head>\n    <body>\n    <div class=\"container-sm\">    \n        <!--HTML\ud3fc\uc2dc\uc791 Start HTML form \/\/-->\n        <!--\ud3fc\uc774\ub984 \ucd9c\ub825 Print form name \/\/-->\n        <form id=\"frm\" action=\"<?php echo $form_action_name; ?>\" method=\"post\">\n        <div class=\"mb-3\">\n            <label for=\"name\" class=\"form-label\">\uc774\ub984:<\/label>\n            <input type=\"text\" class=\"form-control\" id=\"name\" placeholder=\"Enter Your Name\" name=\"name\" required>\n            <div id=\"errorName\"><\/div>\n        <\/div>\n\n        <div class=\"mb-3\"><\/mark>\n        <label for=\"email\" class=\"form-label\">Email:<\/label>\n            <input type=\"text\" <\/mark>class=\"form-control\"<\/mark> id=\"email\" placeholder=\"ID@exmale.com\" name=\"email\" required>\n            <div id=\"errorEmail\"><\/div>\n        <\/div><\/mark>\n\n        <div class=\"mb-3\">\n            <label for=\"pwd\" class=\"form-label\">Password:<\/label>\n            <input type=\"password\" class=\"form-control\" id=\"pwd\" placeholder=\"Enter your password\" name=\"pswd\" required>\n            <div id=\"errorPwd\"><\/div>\n        <\/div>        \n\n        <div class=\"mb-3\">\n            <div class=\"form-check mb-3\">\n            <label class=\"form-check-label\">Remember me<\/label>\n            <input class=\"form-check-input\" type=\"checkbox\" name=\"remember\">\n            <\/div>\n        <\/div>\n\n            <button type=\"button\" class=\"btn btn-primary\" onClick=\"frmSubmit();\">Submit<\/button>\n        <\/form>\n        <!--HTML\ud3fc \ub05d End of HTML form\/\/-->\n    <\/div>    \n    <\/body>\n<\/html>    \n<\/code><\/pre>\n\n\n\n
form_action4.php\n<?php  \nif($_SERVER['REQUEST_METHOD'] == \"POST\"){\n\n   $f_name = $_POST['name'];\n   $f_email = $_POST['email'];<\/mark>\n   $f_pwd = $_POST['pswd'];\n}\necho \"REQUEST_METHOD:\".$_SERVER['REQUEST_METHOD'].\"<br>\";\necho \"\uc774\ub984(NAME):\".$f_name.\"<br>\";\necho \"\uc774\uba54\uc77c(EMAIL):\".$f_email.\"<br>\";<\/mark>\necho \"\ud328\uc2a4\uc6cc\ub4dc(PASSWORD):\".$f_pwd;\n?><\/code><\/pre>\n\n\n\n