RegExp：匹配Javascript中除regex值外的所有内容

Question

What I want to achieve is to match every single word and character, except two, Two, TWO words. This code is part of a form validation, where two, Two, TWO are the answers for the captcha question:

//if(! event.target.validity.valid) {
if(! event.target.validity.valid && input.value === /(^(?!two$|Two$|TWO$).*)/gm) {
  elem.className = 'error';
  parentDiv.className += ' error-input';
  elem.style.display = 'block';
};

Unfortunately this is not working.

UPDATE:

I tried all regex here and finally the loop also, but still not working. I copying here the entire function to have a more view what's going on:

var lang = document.getElementsByTagName('html')[0].getAttribute('lang');

(function() {
  function field(name, langif, langelse) {

    var elem = document.createElement('div');
    elem.style.display = 'none';

    var input = document.getElementById(name);
    var parentDiv = document.getElementsByClassName(name)[0];
    input.parentNode.appendChild(elem);

    // Turning on when error is presented
    input.addEventListener('invalid', function(event) {
      event.preventDefault();
      if(!event.target.validity.valid && name !== 'captcha') {
        elem.className = 'error';
        parentDiv.className += ' error-input';
        elem.style.display = 'block';
      };
      if(!event.target.validity.valid && name === 'captcha' && input.value === input.value.match(/(^(?!kettő$|ketto$|Kettő$|Ketto$|KETTŐ$|KETTO$|two$|Two$|TWO$).*)/gm)[0]) {
        elem.className = 'error-captcha';
        parentDiv.className += ' error-input-captcha';
        elem.style.display = 'block';
      };
      if(!event.target.validity.valid && lang === 'hu-HU') {
        elem.textContent = langif;
      } else {
        elem.textContent = langelse;
      };
    });

    // Turning off when error is not presented
    input.addEventListener('input', function() {
      if(elem.style.display === 'block') {
        elem.className = '';
        parentDiv.classList.remove('error-input');
        elem.style.display = 'none';
      };
    });

    return;
  };

  // Init function
  field('firstname', 'A keresztnév kötelező és/vagy számokat tartalmazott.', 'Firstname is required and/or the field had numbers.');
  field('surname', 'A vezetéknév kötelező és/vagy számokat tartalmazott.', 'Surname is required and/or the field had numbers.');
  field('email', 'Email cím kötelező. Ajánlott formátum: valami@domain.hu', 'Email address is required. Recommended format: something@domain.com');
  field('message', 'Üzenet mező kitöltése kötelező.', 'Message is required.');
  field('captcha', 'Captcha kitöltése kötelező.', 'Captcha is required.');

})();

Expected behaviour: if input field is empty, than throw error. if input field is not matching the described captcha answers, than throw error. Now only works if the input field is empty.

UPDATE 2:

JSFiddle: https://jsfiddle.net/Lanti/ja77k6ca/2/

Only with relevant code: https://jsfiddle.net/Lanti/ja77k6ca/8/

Answer 1

This if statement is trying to see if input.value , a string , is equal to /(^(?!two$|Two$|TWO$).*)/gm , a regular expression .

They are of different types, so they will never be equal.

You should instead use String.prototype.match() to see if input.value matches the regular expression.

This should give you the desired result:

// check to see if calling "match" on the
// regular expression returns the user input

if(! event.target.validity.valid && input.value === input.value.match(/(^(?!two$|Two$|TWO$).*)/gm)[0]) {
  elem.className = 'error';
  parentDiv.className += ' error-input';
  elem.style.display = 'block';
};

Answer 2

Why not just:

var captchaAnswers = {'two': true, 'Two': true, 'TWO': true};

if(!event.target.validity.valid && !(input.value in captchaAnswers)) {
    ...
};

---

EDIT: Your actual issue is coming from the invalid event not being fired on the input when the field is not empty. To make it fire the event you should use the pattern attribute on the input element.

See an updated JSFiddle .