JavaScript ਫਾਰਮ

JavaScript ਫਾਰਮ ਪ੍ਰਮਾਣਨ

HTML ਫਾਰਮ ਪ੍ਰਮਾਣਨ JavaScript ਰਾਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

ਜੇਕਰ ਫਾਰਮ ਫੀਲਡ (fname) ਖਾਲੀ ਹੋਵੇ ਤਾਂ, ਇਹ ਫੰਕਸ਼ਨ ਇੱਕ ਸੁਝਾਅ ਦਿੰਦਾ ਹੈ ਅਤੇ false ਵਾਪਸ ਕਰਦਾ ਹੈ ਤਾਕਿ ਫਾਰਮ ਨੂੰ ਸੰਭਾਲਿਆ ਜਾ ਸਕੇ:

JavaScript ਇੰਸਟੈਂਸ

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Name must be filled out");
    return false;
  }
}

ਫਾਰਮ ਸੰਭਾਲ ਨੂੰ ਸੰਭਾਲਣ ਵਾਲੀ ਫੰਕਸ਼ਨ ਬੁਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:

HTML ਫਾਰਮ ਉਦਾਹਰਣ

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

JavaScript ਨੇ ਨੰਬਰ ਪ੍ਰਵੇਸ਼ ਪ੍ਰਮਾਣਨ ਕਰ ਸਕਦਾ ਹੈ

JavaScript ਸਾਧਾਰਨ ਤੌਰ 'ਤੇ ਨੰਬਰ ਪ੍ਰਵੇਸ਼ ਪ੍ਰਮਾਣਨ ਵਿੱਚ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ:

1 ਤੋਂ 10 ਦਰਮਿਆਨ ਨੰਬਰ ਲਿਖੋ:

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਆਟੋਮੈਟਿਕ HTML ਫਾਰਮ ਪ੍ਰਮਾਣਨ

HTML ਫਾਰਮ ਪ੍ਰਮਾਣਨ ਬਰਾਉਜ਼ਰ ਦੁਆਰਾ ਆਟੋਮੈਟਿਕ ਰੂਪ ਵਿੱਚ ਚਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ:

ਜੇਕਰ ਫਾਰਮ ਫੀਲਡ (fname) ਖਾਲੀ ਹੋਵੇ ਤਾਂ required ਇਹ ਅਤਿਰਿਕਤ ਅਕਸਰ ਫਾਰਮ ਨੂੰ ਸੰਭਾਲਣ ਵਿੱਚ ਰੋਕਦੇ ਹਨ:

HTML ਫਾਰਮ ਉਦਾਹਰਣ

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਸੁਝਾਅ:ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 9 ਜਾਂ ਪੁਰਾਣੇ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਆਟੋਮੈਟਿਕ HTML ਫਾਰਮ ਪ੍ਰਮਾਣਨ ਕੰਮ ਨਹੀਂ ਕਰਦਾ ਹੈ。

ਪ੍ਰਮਾਣਨ

ਪ੍ਰਮਾਣਨ, ਯੂਜ਼ਰ ਦੇ ਪ੍ਰਵੇਸ਼ ਨੂੰ ਸਾਫ, ਸਹੀ ਅਤੇ ਉਪਯੋਗੀ ਬਣਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਹੈ。

ਪ੍ਰਮਾਣਨ ਦੇ ਆਮ ਕੰਮ ਹਨ:

  • ਯੂਜ਼ਰ ਨੇ ਸਾਰੇ ਲਾਜ਼ਮੀ ਫੀਲਡ ਭਰੇ ਹਨ ਕਿ ਨਹੀਂ?
  • ਯੂਜ਼ਰ ਨੇ ਵੈਧ ਤਾਰੀਖ ਲਿਖੀ ਹੈ ਕਿ ਨਹੀਂ?
  • ਯੂਜ਼ਰ ਨੇ ਨੰਬਰ ਫੀਲਡ ਵਿੱਚ ਟੈਕਸਟ ਲਿਖਿਆ ਹੈ ਕਿ ਨਹੀਂ?

ਮੁੱਖ ਤੌਰ 'ਤੇ, ਡਾਟਾ ਪ੍ਰਮਾਣਨ ਦਾ ਉਦੇਸ਼ ਯੂਜ਼ਰ ਦੇ ਪ੍ਰਵੇਸ਼ ਨੂੰ ਸਹੀ ਬਣਾਉਣਾ ਹੈ。

ਪ੍ਰਮਾਣਨ ਕਈ ਵਿਧੀਆਂ ਰਾਹੀਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ਅਤੇ ਕਈ ਤਰੀਕਿਆਂ ਨਾਲ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

ਸਰਵਰ ਪ੍ਰਮਾਣਨ ਵੈਬ ਸਰਵਰ ਵੱਲੋਂ ਭੇਜੇ ਗਏ ਇਨਪੁਟ ਦੇ ਬਾਅਦ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

ਵੈਬ ਸਰਵਰ ਨੂੰ ਭੇਜਣ ਤੋਂ ਪਹਿਲਾਂ ਕਲਾਉਂਟ ਪ੍ਰਮਾਣਨ ਵੈਬ ਬਰਾਉਜ਼ਰ ਦੁਆਰਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ。

HTML ਸੀਮਤ ਪ੍ਰਮਾਣਨ

HTML5 ਵਿੱਚ ਇੱਕ ਨਵਾਂ HTML ਪ੍ਰਮਾਣਨ ਕਨਸੈਪਸ਼ਨ ਵਿਕਸਤ ਕੀਤਾ ਗਿਆ ਹੈ ਜਿਸ ਨੂੰ ਸੀਮਤ ਪ੍ਰਮਾਣਨ ਕਿਹਾ ਜਾਂਦਾ ਹੈ。

HTML ਸੀਮਾਵਰਣ ਅਧਾਰਿਤ ਹੈ:

  • ਸੀਮਾਵਰਣ ਵਾਲੇ HTML input ਪ੍ਰਤੀਯੋਗਿਤਾ
  • ਸੀਮਾਵਰਣ ਵਾਲੇ CSS ਪਸੀਡਾ ਚੋਣਕਾਰ
  • ਸੀਮਾਵਰਣ ਵਾਲੇ DOM ਪ੍ਰਤੀਯੋਗਿਤਾ ਅਤੇ ਮੇਥਾਡ

ਸੀਮਾਵਰਣ ਵਾਲੇ HTML input ਪ੍ਰਤੀਯੋਗਿਤਾ

ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਰਣਨ
disabled input ਐਲੀਮੈਂਟ ਨੂੰ ਨਾ ਹੀ ਕੰਮ ਕਰਨ ਵਾਲਾ ਬਣਾਓ。
max input ਐਲੀਮੈਂਟ ਦੇ ਉੱਚਤਮ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。
min input ਐਲੀਮੈਂਟ ਦੇ ਨਿਮਨਤਮ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。
pattern input ਐਲੀਮੈਂਟ ਦੇ ਮੁੱਲ ਮੋਡਲ ਨਿਰਧਾਰਿਤ ਕਰੋ。
required input ਫੀਲਡ ਲਈ ਪ੍ਰਤੀਯੋਗਿਤਾ ਨਿਰਧਾਰਿਤ ਕਰੋ。
type input ਐਲੀਮੈਂਟ ਦੀ ਕਿਸਮ ਨਿਰਧਾਰਿਤ ਕਰੋ。

ਪੂਰੀ ਸੂਚੀ ਲਈ ਵਿਸ਼ਿਟ HTML ਇੰਪੁਟ ਪ੍ਰਤੀਯੋਗਿਤਾ。

ਸੀਮਾਵਰਣ ਵਾਲੇ CSS ਪਸੀਡਾ ਚੋਣਕਾਰ

ਚੋਣਕਾਰ ਵਰਣਨ
:disabled disabled ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਲੇ input ਐਲੀਮੈਂਟ ਚੁਣੋ。
:invalid ਅਸਥਾਈ ਮੁੱਲ ਵਾਲੇ input ਐਲੀਮੈਂਟ ਚੁਣੋ。
:optional required ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਲੇ input ਐਲੀਮੈਂਟ ਚੁਣੋ。
:required required ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਲੇ input ਐਲੀਮੈਂਟ ਚੁਣੋ。
:valid ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਮੁੱਲ ਵਾਲੇ input ਐਲੀਮੈਂਟ ਚੁਣੋ。

ਪੂਰੀ ਸੂਚੀ ਲਈ ਵਿਸ਼ਿਟ CSS ਪਸੀਡਾ。