[php] php

Viewer

  1. <?php 
  2. echo '<!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Registration Form</title>
  8. <style>
  9.   .error { color: red; font-size: 30px; }
  10. </style>
  11. </head>
  12. <body>
  13.  
  14. <form id="registrationForm">
  15.   User name: <input type="text" id="userName" name="userName"><br>
  16.   Password: <input type="password" id="password" name="password"><br>
  17.   Confirm Password: <input type="password" id="confirmPassword" name="confirmPassword"><br>
  18.   Gender:
  19.   <input type="radio" name="gender" value="Male"> Male
  20.   <input type="radio" name="gender" value="Female"> Female<br>
  21.   Email: <input type="text" id="email" name="email"><br>
  22.   deptno: <input type="text" id="deptno" name="deptno"><br>
  23.   deptname:
  24.   <select id="deptname" name="deptname">
  25.     <option value="Accounting">Accounting</option>
  26.     <option value="Programming">Programming</option>
  27.     <option value="Secretary">Secretary</option>
  28.   </select><br>
  29.   <input type="submit" value="Submit">
  30.   <input type="reset" value="Reset">
  31. </form>
  32.  
  33. <div id="result"></div>
  34.  
  35. <script>
  36. document.getElementById(\'registrationForm\').onsubmit = function(event) {
  37.   event.preventDefault();
  38.   var userName = document.getElementById(\'userName\').value;
  39.   var password = document.getElementById(\'password\').value;
  40.   var confirmPassword = document.getElementById(\'confirmPassword\').value;
  41.   var email = document.getElementById(\'email\').value;
  42.   var deptno = document.getElementById(\'deptno\').value;
  43.   var deptname = document.getElementById(\'deptname\').value;
  44.   var genderInputs = document.getElementsByName(\'gender\');
  45.   var gender = [...genderInputs].find(input => input.checked)?.value;
  46.   var errorMessage = \'\';
  47.   
  48.   // Validation Logic
  49.   if (!/^[A-Z][a-z]+ [A-Z][a-z]+$/.test(userName)) {
  50.     errorMessage += \'User name must consist of 2 alphabetic parts separated by space each part must begin with a capital letter.<br>\';
  51.   }
  52.   if (!/^[A-Z]\\d{5}\\$$/.test(password)) {
  53.     errorMessage += \'Password must begin with 1 uppercase letter followed by 5 digits and a dollar sign ($).<br>\';
  54.   }
  55.   if (password !== confirmPassword) {
  56.     errorMessage += \'Passwords do not match.<br>\';
  57.   }
  58.   if (!/^\\w+@\\w+\\.\\w{2,3}$/.test(email)) {
  59.     errorMessage += \'Email must follow the specified format.<br>\';
  60.   }
  61.   if (!/^\\d$/.test(deptno)) {
  62.     errorMessage += \'Department number must be one digit.<br>\';
  63.   }
  64.   if (![\'Accounting\', \'Programming\', \'Secretary\'].includes(deptname)) {
  65.     errorMessage += \'Department name must be from the list.<br>\';
  66.   }
  67.   
  68.   // Display Results or Errors
  69.   if (errorMessage) {
  70.     document.getElementById(\'result\').innerHTML = \'<div class="error">\' + errorMessage + \'</div>\';
  71.   } else {
  72.     document.getElementById(\'result\').innerHTML = \'<div>\' +
  73.       \'Employee Name is: \' + userName + \'<br>\' +
  74.       \'Employee gender is: \' + gender + \'<br>\' +
  75.       \'Working in department: \' + deptname + \' (deptno \' + deptno + \')<br>\' +
  76.       \'Employee E-mail address: \' + email + \'<br>\' +
  77.       \'</div>\';
  78.   }
  79. };
  80. </script>
  81.  
  82. </body>
  83. </html>';

Editor

You can edit this paste and save as new:


File Description
  • php
  • Paste Code
  • 20 Apr-2024
  • 3.13 Kb
You can Share it: