Làm cách nào để xác thực tính năng khớp mẫu trong văn bản?

Question

Khi tôi sử dụng textarea.checkValidity() hoặc textarea.validity.valid trong javascript với giá trị không hợp lệ cả hai giá trị này luôn trả về true, tôi đang làm gì sai?

<textarea name="test" pattern="[a-z]{1,30}(,[a-z]{1,30})*" id="test"></textarea>​ 

jQuery('#test').on('keyup', function() { 
    jQuery(this).parent().append('<p>' + this.checkValidity() + ' ' + 
    this.validity.patternMismatch + '</p>'); 
}); 

http://jsfiddle.net/Riesling/jbtRU/9/

Answer 1

HTML5 <textarea> yếu tố không hỗ trợ thuộc tính pattern.

Xem MDN doc cho các thuộc tính được phép <textarea>.

Bạn có thể cần tự xác định chức năng này.

Hoặc thực hiện theo thực tiễn HTML 4 truyền thống về xác định hàm JavaScript/jQuery để thực hiện việc này.

Answer 2

Bạn có thể tự thực hiện việc này với setCustomValidity(). Bằng cách này, this.checkValidity() sẽ trả lời bất kỳ quy tắc nào bạn muốn áp dụng cho phần tử của mình. Tôi không nghĩ rằng this.validity.patternMismatch có thể đặt theo cách thủ công, nhưng bạn có thể sử dụng thuộc tính của riêng mình thay thế, nếu cần.

http://jsfiddle.net/yanndinendal/jbtRU/22/

$('#test').keyup(validateTextarea); 

function validateTextarea() { 
    var errorMsg = "Please match the format requested."; 
    var textarea = this; 
    var pattern = new RegExp('^' + $(textarea).attr('pattern') + '$'); 
    // check each line of text 
    $.each($(this).val().split("\n"), function() { 
     // check if the line matches the pattern 
     var hasError = !this.match(pattern); 
     if (typeof textarea.setCustomValidity === 'function') { 
      textarea.setCustomValidity(hasError ? errorMsg : ''); 
     } else { 
      // Not supported by the browser, fallback to manual error display... 
      $(textarea).toggleClass('error', !!hasError); 
      $(textarea).toggleClass('ok', !hasError); 
      if (hasError) { 
       $(textarea).attr('title', errorMsg); 
      } else { 
       $(textarea).removeAttr('title'); 
      } 
     } 
     return !hasError; 
    }); 
} 

Answer 3

này sẽ cho phép các pattern thuộc tính trên tất cả các textareas trong DOM và kích hoạt các xác nhận Html5. Nó cũng sẽ đưa vào mô hình tài khoản đó có ^ hay $ nhà khai thác và thực hiện một trận đấu toàn cầu bằng cách sử dụng g cờ Regex:

$(document).ready(function() { 
    var errorMessage = "Please match the requested format."; 

    $(this).find("textarea").on("input change propertychange", function() { 

     var pattern = $(this).attr("pattern"); 

     if(typeof pattern !== typeof undefined && pattern !== false) 
     { 
      var patternRegex = new RegExp("^" + pattern.replace(/^\^|\$$/g, '') + "$", "g"); 

      hasError = !$(this).val().match(patternRegex); 

      if (typeof this.setCustomValidity === "function") 
      { 
       this.setCustomValidity(hasError ? errorMessage : ""); 
      } 
      else 
      { 
       $(this).toggleClass("error", !!hasError); 
       $(this).toggleClass("ok", !hasError); 

       if (hasError) 
       { 
        $(this).attr("title", errorMessage); 
       } 
       else 
       { 
        $(this).removeAttr("title"); 
       } 
      } 
     } 

    }); 
});