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;
}