2011-04-24 3 views
-1

양식 필드를 반복하고 배열에 저장된 정규식에 대해 유효성을 검사하려고합니다. 여기서 무엇이 잘못되었는지 알 수 없습니다. 어떤 아이디어라도 제발? 대신 그들을 통해 루프 시도의양식 유효성 검사를 위해 정규식을 저장하는 2 차원 배열에 액세스

<script type="text/javascript">//<![CDATA[ 
    //Adds my event listener so that page loads before form becomes operational 
    if(window.addEventListener){ 
    window.addEventListener("load",initVal,false); 
    }else if (window.attachEvent){ 
    window.attachEvent("onload",initVal); 
    } else { window.onload=initVal;} 

    function initVal() { 
    document.orderform.postcode.onchange=checkAll; 
    document.orderform.email.onchange=checkAll; 
     } 
    function checkAll(){ 

    //create 2-dimensional array  
      frmflds= new Array (2); 
     for (i=0;i<frmflds.length;i++) { 
      frmflds [i] = new Array (2); 
    //populate arrays 
      frmflds[0][0] = 'postcode'; 
      frmflds[0][1] = '/^[A-z][A-z]\d{2}\s\d{2}[A-z][A-z]|[A-z][A-z]\d{1}\s\d{1}[A-z][A-z]$/'; 
      frmflds[1][0] = 'email'; 
      frmflds[1][1] = '/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/'; } 
    // loop through form elements and validate against regex stored in array        
    for(var j = 0; j < frmflds.length; j++) { 
    var e = frmflds[j][0][1]; 
    var OK= (e.exec(document.orderform.getElementById()[j].name.value); 
    if !OK 
    { 
    document.orderform.name[j].style.borderColor="red"; 
    document.orderform.name[j].style.backgroundColor="pink"; 
    document.orderform.Submit.onclick.disabled=true; 
    alert("Please correct any highlighted fields and submit again!"); 
    }   
    else{ 
    document.orderform.name[j].style.borderColor="Green"; 
    document.orderform.name[j].style.backgroundColor="PaleGreen"; 
    document.orderform.Submit.onclick.disabled=false; 
    }    
    } }     
    //]]></script> 
    </head> 
    <body> 
    <form method="post" action=""" name="orderform" id="orderfm"> 
    <p><input type="text" name="postcode" id="postcode" ></p> 
    <p><input type="text" name="email" id="email" ></p> 
    <p><input label="" type="submit" name="Submit" value="Submit" id="Submit" disabled="disabled"> 
    </form> 
    </body> 
</html> 

답변

0

왜 당신은 모든 표준 검증을 포함 할 jQuery Validate이를 사용하지 마십시오. 사용자 정의 정규식이있는 경우 다음 당신은 당신의 머리의 통증을 많이 저장됩니다 당신이 addMethod() 기능을 사용할 수 있습니다 실행하려면 그것의 잘 여기

1

우리가 시작하자 검증 방법을 추가하는 방법의 example입니다 문서화 상단에.

이 어떤 의미하지 않습니다

frmflds = new Array(2); 
for(i = 0; i < frmflds.length; i++) { 
    frmflds[i] = new Array(2); 
    //populate arrays 
    frmflds[0][0] = 'postcode'; 
    frmflds[0][1] = '/^[A-z][A-z]\d{2}\s\d{2}[A-z][A-z]|[A-z][A-z]\d{1}\s\d{1}[A-z][A-z]$/'; 
    frmflds[1][0] = 'email'; 
    frmflds[1][1] = '/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/'; 
} 

당신은 두 번 배열을 통해가는 새로운 2 개 요소 배열마다에 frmflds[i]을 설정하는 단계; 충분히 합리적이지만 매번 배열을 통해 매번 똑같은 것을 frmflds으로 설정합니다. 첫 번째 반복에서 frmflds[1]은 유용하지 않지만 배열로 처리하므로 정의되지 않은 값을 배열로 처리 할 수 ​​없기 때문에 모든 것이 바로 중지됩니다. 자바 스크립트 엔진이 종료하기 전에 코드가이 루프를 한 번 반복하지 않아도됩니다. 정규 표현식과 문자열은 다른 것들이므로 정규 표현식을 문자열과 같은 작은 따옴표로 묶고 싶지는 않습니다.

var frmflds = [ 
    [ 'postcode', /^[A-z][A-z]\d{2}\s\d{2}[A-z][A-z]|[A-z][A-z]\d{1}\s\d{1}[A-z][A-z]$/ ], 
    [ 'email', /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/      ] 
]; 

는 또한 frmflds 앞에 var을 통지하여 변수 좋은를 유지하고 글로벌 만들기보다는 지역화 된 것입니다 : 나는이 같은 간단한 일을하려는 생각합니다.

그런 다음 우리는이에 와서 하나는 이해가되지 않습니다

for(var j = 0; j < frmflds.length; j++) { 
    var e = frmflds[j][0][1]; 
    var OK= (e.exec(document.orderform.getElementById()[j].name.value); 
    if !OK { 
     document.orderform.name[j].style.borderColor="red"; 
     document.orderform.name[j].style.backgroundColor="pink"; 
     document.orderform.Submit.onclick.disabled=true; 
     alert("Please correct any highlighted fields and submit again!"); 
    }   
    else{ 
     document.orderform.name[j].style.borderColor="Green"; 
     document.orderform.name[j].style.backgroundColor="PaleGreen"; 
     document.orderform.Submit.onclick.disabled=false; 
    } 
} 

frmflds은 2 개 차원 배열이 아닌 입체 하나입니다 것을 기억하십시오; 그래서 var e = frmflds[j][0][1];은 유용하지 않습니다. 난 당신이 원하는 생각 : 이제

var re = frmflds[j][1]; // This is where the regex is 

, getElementById()document의 방법이며이 인수로 ID를 필요로 getElementById()도 하나의 요소 (안 배열)을 반환 그래서 당신이 원하는 :

var el = document.getElementById(frmflds[j][0]); 
var OK = re.exec(el.value); 

if 문에는 괄호가 필요합니다. 그리고, 양식 요소 id 속성이있는 경우, document.orderform을 통과하는 것보다 오히려 그들을 사용 : 당신이 적어도 실행 무언가를 얻어야한다

var submit = document.getElementById('Submit'); 
if(!OK) { 
    el.style.borderColor  = 'red'; 
    el.style.backgroundColor = 'pink'; 
    submit.disabled   = true; 
    alert('Please correct any highlighted fields and submit again!'); 
} 
else 
    el.style.borderColor  = 'green'; 
    el.style.backgroundColor = 'palegreen'; 
    submit.disabled   = false; 
} 

합니다. 추가 디버깅은 독자를위한 연습으로 남아 있습니다.

관련 문제