मुझे एक ईमेल पता और एक यूआरएल वाले फॉर्म के साथ एक एचटीएमएल पेज बनाना है। मुझे जांच करनी चाहिए कि ईमेल वैध जीमेल है या याहू! प्रारूप, और यदि URL सही भी है। हालांकि, क्रोम पर, जब मैं एक गलत ईमेल टाइप करता हूं, तो इसे ठीक किए बिना मैं यूआरएल के इनपुट में क्लिक करता हूं, मुझे अनंत अलर्ट संदेश मिलते हैं।

ये रही एचटीएमएल फाइल

<form action="/index.html" method="POST" name="form">
    <p>Full name:         <input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"></p>
    <p>Date:              <input type="date"></p>
    <p>Email:             <input type="email" id="email" onblur="validateEmail(document)"></p>
    <p>Favourite website: <input type="url"   id="url"   onblur="validateFavURL(document)"></p>
</form>

और यहाँ जे एस फ़ाइल:

function validateEmail(document) {
    let email = document.getElementById("email").value

    let regexGmail = /\S+@gmail\.\S+/
    let regexYahoo = /\S+@yahoo\.\S+/

    if (!regexGmail.test(email) || regexYahoo.test(email)) {
        alert("Incorrect email address!")
    }
}

function validateFavURL(document) {
    let url = document.getElementById("url").value

    let regexURL     = /https?:\/\/www\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+/
    let regextwodots = /^((?!\.\.).)+/   
    let regexdots    = /\..+\./

    if (!regexURL.test(url) || !regextwodots.test(url) || regexdots.test(url)) {
        alert("Incorrect webpage!")
    }
}
0
Balog Szilárd 3 अप्रैल 2020, 19:29

1 उत्तर

सबसे बढ़िया उत्तर

मैंने आपका कुछ कोड बदल दिया है और कुछ मेरा जोड़ दिया है, अब अलर्ट स्मार्ट के साथ चालू हो जाएगा।

/*
  hasAlreadyAlerted is a boolean variable, from it's name you know that
  this variable will be false only if the elementy currently focusing on
  has not been alerted last time.

  alwertedElement is a reference to the last element that triggered the alert
*/
var hasAlreadyAlerted = false, alertedElement;
    document.querySelector("form").addEventListener('focus', (event) => 
      hasAlreadyAlerted = event.target == alertedElement, true);

    function validateEmail(emailElement) {
      let email = emailElement.value,
        regexGmail = /\S+@gmail\.\S+/,
        regexYahoo = /\S+@yahoo\.\S+/;

      if(!hasAlreadyAlerted && (!regexGmail.test(email) || regexYahoo.test(email))) {
        hasAlreadyAlerted = true;
        alertedElement = emailElement;
        alert("Incorrect email address!")
      }
    }

    function validateFavURL(urlElement) {
      let url = urlElement.value,
        regexURL = /https?:\/\/www\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+\.[A-Za-z1-9_-]+/,
        regextwodots = /^((?!\.\.).)+/,   
        regexdots = /\..+\./;

      if (!hasAlreadyAlerted && (!regexURL.test(url) || !regextwodots.test(url) || regexdots.test(url))) {
          hasAlreadyAlerted = true;
          alertedElement = document.getElementById("url");
          alert("Incorrect webpage!")
      }
    }
/*
  So if the user types a wrong email or url that triggers the alert and
  stores the reference of the element and that an alert has already triggerd,
  and no other alerts should be triggered from the same element unless the user
  has clicked in another one, this is all to avoid getting in an infinite loop
  like you have already seen, and the cause of that loop is just the way the 
  events are being handled, I thinks when the user types something and clicks 
  outside the input element the blur event is triggered and that triggers an 
  alert and once you click on the alert button the blur event is triggered once 
  again and so on making a an infinite number of alerts
*/
<form action="/index.html" method="POST" name="form">
    <p>Full name:        <input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"></p>
    <p>Dátum:            <input type="date"></p>
    <p>Email:            <input type="email" id="email" onblur="validateEmail(this)"></p>
    <p>Kedvenc weboldal: <input type="url" id="url" onblur="validateFavURL(this)"></p>
  </form>
1
SaymoinSam 3 अप्रैल 2020, 19:07