Javascript fallback爲HTML5「模式」屬性<input>

Question

我使用HTML5「模式」屬性進行客戶端驗證（請不要告訴我有關服務器端驗證，我有）。我想爲使用瀏覽器但沒有「模式」支持的用戶使用Javascript或jQuery後備。什麼是這樣做的好方法？

下面是一個例子輸入元素：

<input type=tel name=contact[phone] id=phone required pattern=^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$> 

Answer 1

在submit事件的形式（或地方）的，利用其現有的pattern性能驗證。

var input = document.getElementsByName('contact[phone]')[0], 
    isValid = input.value.search(new RegExp(input.getAttribute('pattern'))) >= 0; 

jsFiddle。

您需要先檢查瀏覽器的兼容性，看它是否支持pattern屬性。你可以用Modernizr來做到這一點。

Answer 2

您可以使用Modernizr來檢查用戶瀏覽器支持的功能。

Detecting HTML5 with Modernizr

近代化可以讓你做的東西是這樣的：

if (Modernizr.canvas) { 
    // let's draw some shapes! 
} else { 
    // no native canvas support available :(
} 

Answer 3

我最好的猜測是第一個具有使用了jQuery找出瀏覽器和版本的功能，並匹配高達如果它支持模式與否，然後做類似

$("#element").onChange(function() 
{ 
    if(doesNotSupportPattern()) 
    { 
     var pattern = $(this).prop('pattern'); 
    if(!$(this).val().match(pattern))) 
     { 
      //Code to make form invalid 
     } 
    } 
}); 

或類似的東西

---

計劃的變更，這是不是去

$("#form").submit(function() 
{ 
    var valid = true; 
    $(this).find('input').each(function() 
    { 
     if(!$(this).prop('pattern')) 
      continue; 

     if(!$(this).val().match($(this).prop('pattern'))) 
      valid = false; 
    }); 

    if(!valid) 
    { 
     //invalidate form 
    } 
}); 

會更好的方式。這樣它會觸發每個元素，並且它更緊湊，並且如果啓用了pattern，它不會干預，因爲它只應該在所有匹配的情況下才會提交，如果不匹配，則表單無論如何都會失效