JavaScript Validation API
Constraint Validation DOM နည်းလမ်းများ
| Property | Description |
|---|---|
| checkValidity() | Returns true if an input element contains valid data. |
| setCustomValidity() | Sets the validationMessage property of an input element. |
ထည့်သွင်းမှုအကွက်တွင် မမှန်ကန်သော ဒေတာများ ပါဝင်နေပါက မက်ဆေ့ချ်ကို ပြသပါ-
checkValidity() နည်းလမ်း
<input id="id1" type="number" min="100" max="300"
required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
const inpObj = document.getElementById("id1");
if (!inpObj.checkValidity()) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
}
}
</script>
Constraint Validation DOM Properties
| Property | Description |
|---|---|
| validity | Contains boolean properties related to the validity of an input element. |
| validationMessage | Contains the message a browser will display when the validity is false. |
| willValidate | Indicates if an input element will be validated. |
တရားဝင်မှု သတ္တိများ
ထည့်သွင်းသည့်ဒြပ်စင် တစ်ခု၏ တရားဝင်မှုပိုင်ဆိုင်မှု တွင် ဒေတာတရားဝင်မှုနှင့်ဆက်စပ်သော ဂုဏ်သတ္တိများစွာပါရှိသည်-
| Property | Description |
|---|---|
| customError | Set to true, if a custom validity message is set. |
| patternMismatch | Set to true, if an element's value does not match its pattern attribute. |
| rangeOverflow | Set to true, if an element's value is greater than its max attribute. |
| rangeUnderflow | Set to true, if an element's value is less than its min attribute. |
| stepMismatch | Set to true, if an element's value is invalid per its step attribute. |
| tooLong | Set to true, if an element's value exceeds its maxLength attribute. |
| typeMismatch | Set to true, if an element's value is invalid per its type attribute. |
| valueMissing | Set to true, if an element (with a required attribute) has no value. |
| valid | Set to true, if an element's value is valid. |
ဥပမာများ
ထည့်သွင်းမှုအကွက်ရှိ နံပါတ်သည် 100 (ထည့်သွင်းမှု၏ ရည်ညွှန်းချက်) ထက်ကြီး max
ပါက မက်ဆေ့ချ်ကို ပြသပါ-
rangeOverflow အိမ်ခြံမြေ
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = "Value OK";
if (document.getElementById("id1").validity.rangeOverflow) {
text = "Value too large";
}
}
</script>
အဖြည့်အကွက်တစ်ခုရှိ နံပါတ်သည် 100 (ထည့်သွင်းမှု၏ ရည်ညွှန်းချက်) ထက်နည်း minပါက မက်ဆေ့ချ်ကို ပြသပါ-
rangeUnderflow ပိုင်ဆိုင်မှု
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
let text = = "Value OK";
if (document.getElementById("id1").validity.rangeUnderflow) {
text = "Value too small";
}
}
</script>