Data Validation? คือ การตรวจสอบข้อมูลที่ส่งมาจากผู้ใช้งาน เช่น ข้อมูลที่ส่งมาจากฟอร์ม หรือข้อมูลที่ส่งมาจากการกดปุ่ม ฯลฯ ก่อนจะนำเข้าข้อมูล ซึ่งจะทำให้การทำงานของระบบมีความปลอดภัยมากขึ้น
ตัวอย่างการทำ Data Validation ต่างๆ
1st Firstname Lastname
Firstname, Lastname การทำ validation ของชื่อนามสกุล โดยมีตัวอย่าง Test Case ดังนี้
- ต้องไม่มีช่องว่าง (white space) ระหว่างคำ
- ต้องไม่มีตัวเลขและอักขระพิเศษ
<div class='root'>
<input type="text" placeholder="Firstname" pattern='^[a-zA-Zก-๏\s]+$' />
<p class='error-message'>
message
</p>
</div>
input {
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input:invalid {
border-color: red;
}
input:invalid ~ .error-message {
display: block;
}
input:not(:focus):not(:placeholder-shown):valid {
border-color: green;
}
.error-message {
display: none;
color: red;
}
2nd Email
Email การทำ validation ของชื่อนามสกุล โดยมีตัวอย่าง Test Case ดังนี้
- ต้องมีเครื่องหมาย @ ระหว่างคำและตรงตาม format ของ email
<div class='root'>
<input type="email" placeholder="Email" />
<p class='error-message'>
message
</p>
</div>
input {
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input:not(:focus):not(:placeholder-shown):invalid {
border-color: red;
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
input:not(:focus):not(:placeholder-shown):valid {
border-color: green;
}
.error-message {
display: none;
color: red;
}
3rd Phone Number
Phone Number การทำ validation ของชื่อนามสกุล โดยมีตัวอย่าง Test Case ดังนี้
- ต้องเป็นตัวเลขเท่านั้น และตรงตาม pattern ของ phone number กำหนดไว้
<div class='root'>
<input type="tel" placeholder="123-12-123" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />
<p class='error-message'>
message
</p>
</div>
<div class='root'>
<input type="tel" placeholder="123-12-123" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
<p class='error-message'>
message
</p>
</div>
<div class='root'>
<input type="tel" placeholder="0900000000" pattern="[0-9]{10}" maxlength="10" />
<p class='error-message'>
message
</p>
</div>
input {
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input:not(:focus):not(:placeholder-shown):invalid {
border-color: red;
}
input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
input:not(:focus):not(:placeholder-shown):valid {
border-color: green;
}
.error-message {
display: none;
color: red;
}