ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﻡﺮﻓ ﯽﺠﻨﺳ ﺭﺎﺒﺘﻋﺍ

فهرست مطالب

ﺖﯾﺩﻭﺪﺤﻣ ﯽﺠﻨﺳﺭﺎﺒﺘﻋﺍ DOM ﯼﺎﻫﺵﻭﺭ

checkValidity(): .ﺪﻧﺍﺩﺮﮔ ﯽﻣﺮﺑ ﺍﺭ true ،ﺪﺷﺎﺑ ﺮﺒﺘﻌﻣ ﯼﺎﻫ ﻩﺩﺍﺩ ﯼﻭﺎﺣ ﯼﺩﻭﺭﻭ ﺮﺼﻨﻋ ﮏﯾ ﺮﮔﺍ
setCustomValidity(): .ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺍﺭ ﯼﺩﻭﺭﻭ ﺮﺼﻨﻋ ﮏﯾ validationMessage ﯽﮔﮋﯾﻭ

:ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﻡﺎﯿﭘ ﮏﯾ ،ﺖﺳﺍ ﺮﺒﺘﻌﻣﺎﻧ ﯼﺎﻫ ﻩﺩﺍﺩ ﯼﻭﺎﺣ ﯼﺩﻭﺭﻭ ﺪﻠﯿﻓ ﮏﯾ ﺮﮔﺍ

.()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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  const inpObj = document.getElementById("id1");
  if (!inpObj.checkValidity()) {
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
  } else {
    document.getElementById("demo").innerHTML = "Input OK";
  } 
} 
</script>

</body>
</html>

ﺖﯾﺩﻭﺪﺤﻣ ﯽﺠﻨﺳﺭﺎﺒﺘﻋﺍ DOM ﯼﺎﻫ ﯽﮔﮋﯾﻭ

validity: .ﺖﺳﺍ ﯼﺩﻭﺭﻭ ﺮﺼﻨﻋ ﮏﯾ ﺭﺎﺒﺘﻋﺍ ﻪﺑ ﻁﻮﺑﺮﻣ ﯽﻟﻮﺑ ﺹﺍﻮﺧ ﯼﻭﺎﺣ
validationMessage: .ﺪﻫﺩ ﯽﻣ ﺶﯾﺎﻤﻧ ﺭﺎﺒﺘﻋﺍ ﻥﺩﻮﺑ ﺖﺳﺭﺩﺎﻧ ﺕﺭﻮﺻ ﺭﺩ ﺮﮔﺭﻭﺮﻣ ﻪﮐ ﺖﺳﺍ ﯽﻣﺎﯿﭘ ﯼﻭﺎﺣ
willValidate: .ﺮﯿﺧ ﺎﯾ ﺩﻮﺷ ﯽﻣ ﺪﯿﯾﺎﺗ ﯼﺩﻭﺭﻭ ﺮﺼﻨﻋ ﮏﯾ ﺎﯾﺁ ﻪﮐ ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ

ﺭﺎﺒﺘﻋﺍ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

ﺭﺎﺒﺘﻋﺍ ﯽﮔﮋﯾﻭ ﺖﺳﺍ ﺩﺪﻋ ﮏﯾ ﯼﻭﺎﺣ ﯼﺩﻭﺭﻭ ﺮﺼﻨﻋ ﮏﯾ

customError: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ،ﺪﺷﺎﺑ ﻩﺪﺷ ﻢﯿﻈﻨﺗ ﯽﺷﺭﺎﻔﺳ ﺭﺎﺒﺘﻋﺍ ﻡﺎﯿﭘ ﮏﯾ ﺮﮔﺍ
patternMismatch: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ،ﺪﺷﺎﺑ ﻪﺘﺷﺍﺪﻧ ﺖﻘﺑﺎﻄﻣ ﻥﺁ ﯼﻮﮕﻟﺍ ﯽﮔﮋﯾﻭ ﺎﺑ ﯼﺮﺼﻨﻋ ﺭﺍﺪﻘﻣ ﺮﮔﺍ
rangeOverflow: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ،ﺪﺷﺎﺑ ﺮﺘﺸﯿﺑ ﻥﺁ max ﯽﮔﮋﯾﻭ ﺯﺍ ﯼﺮﺼﻨﻋ ﺭﺍﺪﻘﻣ ﺮﮔﺍ
rangeUnderflow: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ،ﺪﺷﺎﺑ min ﯽﮔﮋﯾﻭ ﺯﺍ ﺮﺘﻤﮐ ﯼﺮﺼﻨﻋ ﺭﺍﺪﻘﻣ ﺮﮔﺍ
stepMismatch: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ،ﺪﺷﺎﺑ ﺮﺒﺘﻌﻣﺎﻧ ﻥﺁ step ﯽﮔﮋﯾﻭ ﯼﺍﺮﺑ ﯼﺮﺼﻨﻋ ﺭﺍﺪﻘﻣ ﺮﮔﺍ
tooLong: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ،ﺩﻮﺷ ﺮﺘﺸﯿﺑ ﻥﺁ maxLength ﯽﮔﮋﯾﻭ ﺯﺍ ﯼﺮﺼﻨﻋ ﺭﺍﺪﻘﻣ ﺮﮔﺍ
typeMismatch: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ،ﺪﺷﺎﺑ ﺮﺒﺘﻌﻣﺎﻧ ﻥﺁ ﻉﻮﻧ ﯽﮔﮋﯾﻭ ﯼﺍﺮﺑ ﯼﺮﺼﻨﻋ ﺭﺍﺪﻘﻣ ﺮﮔﺍ
valueMissing: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ،ﺪﺷﺎﺑ ﻪﺘﺷﺍﺪﻧ ﯼﺭﺍﺪﻘﻣ (ﺯﺎﯿﻧ ﺩﺭﻮﻣ ﯽﮔﮋﯾﻭ ﺎﺑ) ﯼﺮﺼﻨﻋ ﺮﮔﺍ
valid: .ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ true ﯼﻭﺭ ﺪﺷﺎﺑ ﺮﺒﺘﻌﻣ ﯼﺮﺼﻨﻋ ﺭﺍﺪﻘﻣ ﺮﮔﺍ

ﺎﻫ ﻝﺎﺜﻣ

ﯼﺩﻭﺭﻭ ﺮﺜﮐﺍﺪﺣ<"code class="w3-codespan>) ﺪﺷﺎﺑ 100 ﺯﺍ ﺮﺘﺸﯿﺑ ﯼﺩﻭﺭﻭ ﺪﻠﯿﻓ ﮏﯾ ﺭﺩ ﺩﺪﻋ

`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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>

<p>If the number is greater than 100 (the input's max attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeOverflow) {
    text = "Value too large";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

:ﺪﯿﻫﺩ ﺶﯾﺎﻤﻧ ﻡﺎﯿﭘ ﮏﯾ ،(ﯼﺩﻭﺭﻭ min ﯽﮔﮋﯾﻭ) ﺪﺷﺎﺑ 100 ﺯﺍ ﺮ

`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>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Validation</h2>

<p>Enter a number and click OK:</p>

<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>

<p>If the number is less than 100 (the input's min attribute), an error message will be displayed.</p>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (document.getElementById("id1").validity.rangeUnderflow) {
    text = "Value too small";
  } else {
    text = "Input OK";
  } 
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →