jQuery를 사용하여 특정 유형의 입력을 양식으로 강제 작성

Question

신용 카드 번호를 사용할 양식이 있습니다. 어떻게 다음 강제 할 수 아멕스가하는 CSV 번호 선택 요소에서

3 자리 숫자를 선택한다면, CC 번호 (15)를

16 자리를 4 아멕스는 선택 요소에서 선택되는 경우

billingState에 대한

2 자리 (그래서 그것은 단지 NY, CA, NV, 등 수 있습니다) billingZip에 대한

5 자리

이

(...) ... - 전화 번호

을위한 .... 형식

여기 내 코드가 있습니다 - http://slexy.org/view/s2dgDx7fV9

페이지의 상당 부분에서 jQuery를 사용하고 있습니다. jQuery에서 어떻게하면됩니까?

감사합니다.

Answer 1

자바 스크립트 코드를 추가해야한다고 가정합니다. 일반적인 HTMl은 사용자 입력을 제어하는 ​​강력한 메커니즘을 제공하지 않습니다. 이 같은 신용 카드 번호를 확인할 수 있습니다 jQuery를 사용

:

function isAmExSelected() 
{ 
    return $("#creditCardType").val() == "American Express"; 
} 

function containsOnlyDigits(str) 
{ 
    return str.match(/[^0-9]/) == null; 
} 

function validateCCNumber() 
{ 
    var ccn = $("#creditCardNumber").val(); 
    var onlyDigits = containsOnlyDigits(ccn); 
    if(isAmExSelected()) 
    { 
     return ccn.length == 15 && onlyDigits; 
    } 
    else 
    { 
     return ccn.length == 16 && onlyDigits; 
    } 
} 

function registerValidation(id, validateMethod, errorMethod) 
{ 
    $(id).change(function(){ 
     if(validateMethod() == false) 
     { 
      errorMethod(); 
     } 
    }); 
} 

    $(document).ready(function(){ 
     registerValidation("#creditCardNumber", validateCCNumber, function(){alert("Error!")}); 
    }); 

당신은 자신이 다른 검증을 작성해야합니다.

Answer 2

입력을 키 업 이벤트에 바인드하십시오. 또한 4 = Visa, 5 = Mastercard, 3 = Amex (보통), 6 = Discover와 같은 첫 번째 숫자로 카드의 유효성을 검사 할 수 있습니다.

$(document).ready(function(){ 
    $("#creditCardNumber").change(function(){ 
     $value = $(this).val(); 
     $type = $value.substr(0,1); 

     if ($type == '3'){ 
      $(this).attr("maxLength", 15); 
     } 
     else { 
      $(this).attr("maxLength", 16); 
     } 

     if ($(this).attr("maxLength") < $value.length) { 
     $len = ($(this).attr("maxLength") - 1); 
      $(this).val($value.substr(0,$len)); 
     } 
    }); 
}); 

CVV와 비슷한 작업을 수행하거나 첫 번째 숫자 대신 카드 유형의 값을 얻을 수도 있습니다. 주 및 우편 번호의 경우 미국 기반 주소 만 수락한다고 가정하면 HTML에 maxLength 속성을 설정할 수 있습니다. 전화 번호 마스크는 jQuery 플러그인을 사용하지 않았으므로 보증 할 수 없지만 올바른 방향으로 설정하면 잘됩니다.

http://webdeveloperplus.com/jquery/how-to-mask-input-with-jquery/