HTML5 유효성 검사를위한 폴리필 만들기

Question

나는 구속 유효성 검사 API의 일부를 사용하는 매우 간단한 유효성 검사 플러그인을 만들고 있습니다. 그래서 같은 API, valueMissing 및 patternMismatch의이 개 기능을 사용하고 있습니다 :

내가 전체 HTML5 검증 라이브러리 또는 플러그인을 사용하여 반대 때문에 이러한 기능은 이전 버전의 브라우저에서 작동 내 자신의 polyfill을 쓰고 싶습니다

. 그러나

if (!typeof document.createElement('input').checkValidity == 'function'){ 
    validity.valueMissing = function(){ 
     // check for value 
    } 
} 

, 나는 이것에 대해 이동하는 방법을 알아낼 수 없으며 요소가 첫 번째 부분으로 사용하는 방법 :

그래서 나는 내가 무엇을 달성하기 위해 노력하고있어이 같은 추측 함수의 :

el.validity.valueMissing 

어떤 도움이나 제안에 미리 감사드립니다!

Answer 1

가이 폴리에 대한 참여 약간의 작업이 될,하지만 당신은 무엇을해야하는지, HTMLInputElement의 프로토 타입을 변경, 그래서 각각의 새로운 인스턴스가 그 방법과 propertyes (validity, checkValidity 등)를 가지고있다. 이 라인을 따라

뭔가 : 그래서 마침내 Poelinca의 대답에서 일부 도움이 알아 낸

HTMLInputElement.prototype.testMethod = function (e) { console.log(e) }; 
HTMLInputElement.prototype.testProp = 'foo'; 
var input = document.createElement('input'); 
input.testMethod(input.testProp); 

Answer 2

...

if (typeof document.createElement('input').checkValidity !== 'function') { 
    Object.defineProperty(Element.prototype, 'validity', { 
     get: function() { 
      return this; 
     } 
    }); 

    Object.defineProperty(Element.prototype.validity, 'valueMissing', { 
     get: function() { 
      return this.value !== ""; 
     } 
    }); 

    Object.defineProperty(Element.prototype.validity, 'patternMismatch', { 
     get: function() { 
      var pattern = this.getAttribute('pattern'), 
       regEx = pattern !== null ? eval("{/" + pattern + "/}") : ""; 
       value = this.value; 

      if (regEx !== "") { 
       return regEx.test(value); 
      } else { 
       return true; 
      } 
      return false; 
     } 
    }); 
} 

나는 내가없이 함수를 호출 할 수 Object.defineProperty을 사용 괄호를 사용하면 기본 Constraint 유효성 검사 API가 작동하는 방식입니다.

if (el.validity.valueMissing || el.validity.patternMismatch) { //... 

제 연구에서 이처럼 DOM을 확장하는 것이 많은 문제가 될 수 있으므로 실제로 권장되지 않는다는 것을 알게되었습니다. 자세한 내용은 this article을 참조하십시오. 의견은이 기사가 꽤 오래된 데 특히 도움이됩니다.

내 경우에는 내가 뭘 하려는지 꽤 간단하고 난 단지 IE8 +를 지원해야합니다. 어쩌면 약간 과잉이라고 생각하지만 나는 그것을 좋아한다.

제 답변을/비평 해주십시오.

감사합니다.