유효성 검사가 포함된 등록 양식의 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>
첫댓글 https://www.w3schools.com/css/tryit.asp?filename=trycss_default
https://www.tutorialstonight.com/html-code-for-registration-form-with-validation
https://ninjaashub.blogspot.com/ 대모
이미지 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
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