జావాస్క్రిప్ట్ వెబ్ వెరిఫికేషన్ ఏపిఐ

బంధం పరిశీలన డామ్ మెథడ్

గుణం వివరణ
checkValidity() ఇన్పుట్ ఎలమెంట్లో ప్రమాణాలు ఉన్నప్పుడు true తిరిగి ఇవ్వబడుతుంది。
setCustomValidity() ఇన్పుట్ ఎలమెంట్యొక్క validationMessage గుణాన్ని అమర్చండి。

ఇన్పుట్ ఫీల్డ్లో అనివార్యమైన డేటా ఉన్నప్పుడు సందేశాన్ని ప్రదర్శించండి:

checkValidity() పద్ధతి

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">సరే</button>
<p id="demo"></p>
<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  }
}
</script>

స్వయంగా ప్రయత్నించండి

పరిమితి ప్రమాణాల డాక్యుమెంట్ గుణం

గుణం వివరణ
validity ఇన్పుట్ ఎలమెంట్లో ప్రమాణాలకు సంబంధించిన బుల్ గుణాలను కలిగి ఉంటుంది。
validationMessage ప్రమాణాల పరిశీలన సరిపోలనప్పుడు బ్రౌజర్ ప్రదర్శించే సందేశాన్ని కలిగి ఉంటుంది。
willValidate ఇన్పుట్ ఎలమెంట్ని ప్రమాణాల పరిశీలన చేయాలా అని సూచిస్తుంది。

ప్రమాణాల గుణం

ఇన్పుట్ ఎలమెంట్లో ఉన్న ప్రమాణాల గుణంలో అనేక డేటా ప్రమాణాలకు సంబంధించిన గుణాలు ఉన్నాయి:

గుణం వివరణ
customError కొత్త ప్రమాణాలు అమర్చబడితే true పెట్టబడుతుంది。
patternMismatch ఎలమెంట్ యొక్క విలువ దాని pattern గుణానికి సరిపోనప్పుడు true పెట్టబడుతుంది。
rangeOverflow ఎలమెంట్ యొక్క విలువ దాని max గుణానికి అధికం అయితే true పెట్టబడుతుంది。
rangeUnderflow ఎలమెంట్ యొక్క విలువ దాని min గుణానికి తక్కువగా ఉన్నప్పుడు true పెట్టబడుతుంది。
stepMismatch ఎలమెంట్ యొక్క విలువ దాని step గుణానికి చెల్లనిది అయితే true పెట్టబడుతుంది。
tooLong ఎలమెంట్ యొక్క విలువ దాని maxLength గుణానికి అధికం అయితే true పెట్టబడుతుంది。
typeMismatch ఎలమెంట్ యొక్క విలువ దాని type గుణానికి చెల్లనిది అయితే true పెట్టబడుతుంది。
valueMissing ఎలమెంట్ (required గుణం కలిగినది) యొక్క విలువ లేకపోయితే true పెట్టబడుతుంది。
valid ఎలమెంట్ యొక్క విలువ చెల్లనిది అయితే true పెట్టబడుతుంది。

ఉదాహరణ

ఇన్పుట్ ఫీల్డ్లో ఉన్న సంఖ్య నుండి 100 పెద్దది అయితే (ఇన్పుట్ ఎలమెంట్లో max గుణం），అప్పుడు ఒక సందేశాన్ని ప్రదర్శించబడుతుంది:

rangeOverflow లభ్యతా గుణం

<input id="id1" type="number" max="100">
<button onclick="myFunction()">సరే</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "విలువ సరైనది అని";
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "విలువ పెద్దది అని";
  }
}
</script>

స్వయంగా ప్రయత్నించండి

ఇన్పుట్ ఫీల్డ్ యొక్క సంఖ్య చిన్నది ఉంటే 100 (ఇన్పుట్ ఎలమెంట్ యొక్క min గుణం），అప్పుడు ఒక సందేశాన్ని ప్రదర్శించబడుతుంది:

rangeUnderflow అనునది గుణం

<input id="id1" type="number" min="100">
<button onclick="myFunction()">సరే</button>
<p id="demo"></p>
<script>
function myFunction() {
  let text = "విలువ సరైనది అని";
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "విలువ చిన్నది అని";
  }
}
</script>

స్వయంగా ప్రయత్నించండి