유효성 검사가 포함된 등록 양식의 HTML 코드

[gyun님]

유효성 검사가 포함된 등록 양식의 HTML 코드

이 기사에서는 JavaScript로 유효성 검사를 수행하는 등록 양식용 HTML 코드를 작성하겠습니다. 등록 양식에 대한 자바스크립트 유효성 검사가 예제와 함께 단계별로 설명됩니다.

<style>

* {
  margin: 0
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background-color: #6699cc;
}

.container h1 {
  color: white;
  font-family: sans-serif;
  margin: 20px;
}

.registartion-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-family: sans-serif;
  background-color: #154a68;
  padding: 20px;
}

.registartion-form input,
.registartion-form select,
.registartion-form textarea {
  border: none;
  padding: 5px;
  margin-top: 10px;
  font-family: sans-serif;
}

.registartion-form input:focus,
.registartion-form textarea:focus {
  box-shadow: 3px 3px 10px rgb(228, 228, 228), -3px -3px 10px rgb(224, 224, 224);
}

.registartion-form .submit {
  width: 100%;
  padding: 8px 0;
  font-size: 20px;
  color: rgb(44, 44, 44);
  background-color: #ffffff;
  border-radius: 5px;
}

.registartion-form .submit:hover {
  box-shadow: 3px 3px 6px rgb(255, 214, 176);
}

</style>

<div class="container">
  <h1>HTML registration form with varification</h1>
  <form name="registration" class="registartion-form" xxxxonsubmit="return formValidation()">
    <table>
      <tr>
        <td><label for="name">Name:</label></td>
        <td><input type="text" name="name" id="name" placeholder="your name"></td>
      </tr>
      <tr>
        <td><label for="email">Email:</label></td>
        <td><input type="text" name="email" id="email" placeholder="your email"></td>
      </tr>
      <tr>
        <td><label for="password">Password:</label></td>
        <td><input type="password" name="password" id="password"></td>
      </tr>
      <tr>
        <td><label for="phoneNumber">Phone Number:</label></td>
        <td><input type="number" name="phoneNumber" id="phoneNumber"></td>
      </tr>
      <tr>
        <td><label for="gender">Gender:</label></td>
        <td>Male: <input type="radio" name="gender" value="male">
          Female: <input type="radio" name="gender" value="female">
          Other: <input type="radio" name="gender" value="other"></td>
      </tr>
      <tr>
        <td><label for="language">language</label></td>
        <td>
          <select name="language" id="language">
            <option value="">Select language</option>
            <option value="English">English</option>
            <option value="Spanish">Spanish</option>
            <option value="Hindi">Hindi</option>
            <option value="Arabic">Arabic</option>
            <option value="Russian">Russian</option>
          </select>
        </td>
      </tr>
      <tr>
        <td><label for="zipcode">Zip Code:</label></td>
        <td><input type="number" name="zipcode" id="zipcode"></td>
      </tr>
      <tr>
        <td><label for="about">About:</label></td>
        <td><textarea name="about" id="about" placeholder="Write about yourself..."></textarea></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" class="submit" value="Register" /></td>
      </tr>
    </table>
  </form>
</div>

<scriot>

// Select all input elements for varification
const name = document.getElementById("name");
const email = document.getElementById("email");
const password = document.getElementById("password");
const phoneNumber = document.getElementById("phoneNumber");
const gender = document.registration;
const language = document.getElementById("language");
const zipcode = document.getElementById("zipcode");

// function for form varification
function formValidation() {
  
  // checking name length
  if (name.value.length < 2 || name.value.length > 20) {
    alert(‎"Name length should be more than 2 and less than 21");
    name.focus();
    return false;
  }
  // checking email
  if (email.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
    alert(‎"Please enter a valid email!");
    email.focus();
    return false;
  }
  // checking password
  if (!password.value.match(/^.{5,15}$/)) {
    alert(‎"Password length must be between 5-15 characters!");
    password.focus();
    return false;
  }
  // checking phone number
  if (!phoneNumber.value.match(/^[1-9][0-9]{9}$/)) {
    alert(‎"Phone number must be 10 characters long number and first digit can't be 0!");
    phoneNumber.focus();
    return false;
  }
  // checking gender
  if (gender.gender.value === "") {
    alert(‎"Please select your gender!");
    return false;
  }
  // checking language
  if (language.value === "") {
    alert(‎"Please select your language!")
    return false;
  }
  // checking zip code
  if (!zipcode.value.match(/^[0-9]{6}$/)) {
    alert(‎"Zip code must be 6 characters long number!");
    zipcode.focus();
    return false;
  }
  return true;
}

</scriprt>

</body>

</html>

[gyun님]

https://www.w3schools.com/css/tryit.asp?filename=trycss_default

[gyun님]

https://www.tutorialstonight.com/html-code-for-registration-form-with-validation

[gyun님]

https://ninjaashub.blogspot.com/ 대모

[gyun님]

이미지 https://www.google.com/search?q=Sign+Up+Form+With+JS+Validation+%7C+HTML+CSS+JS&sca_esv=589004769&rlz=1C1NDCM_koKR825KR825&tbm=isch&sxsrf=AM9HkKlIQjbuSqUKDDjsmM5ac324J_yXjw:1702018297903&source=lnms&sa=X&ved=2ahUKEwiXwbCgoP-CAxVF62EKHeSWB-AQ_AUoAXoECAMQAw&biw=1366&bih=641&dpr=1

[gyun님]

https://www.google.com/search?q=Sign+Up+Form+With+JS+Validation+%7C+HTML+CSS+JS&source=lmns&tbm=vid&bih=641&biw=1366&rlz=1C1NDCM_koKR825KR825&hl=ko&sa=X&ved=2ahUKEwiA3ZyuoP-CAxVzhVYBHfI3Bh4Q_AUoAnoECAEQAg