Accessing 2 dimensional arrays storing regexes for form validation_问答_开发者

I am trying to loop through form fields and validate against regexes stored in arrays. Can't see what is wrong here. Any ideas please?

 <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=开发者_JS百科"email" id="email" ></p>
   <p><input label="" type="submit" name="Submit" value="Submit" id="Submit" disabled="disabled"> 
   </form>
  </body>
</html>

Let us start at the top.

This doesn't make any sense:

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})+$/';
}

You're going through the array twice and setting frmflds[i] to a new two element array each time; that's reasonable enough but each time through the array you're setting frmflds to the same thing each time through. On the first iteration, frmflds[1] won't have anything useful in it but you're treating it as an array so everything stops right there because you can't treat an undefined value as an array. Your code won't even get through one iteration of this loop before the JavaScript engine shuts it down. And regular expressions and strings are different things so you don't want to wrap your regular expressions in string-like single quotes. I think you want something simpler like this:

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})+$/                       ]
];

Also notice the var in front of frmflds, that will keep your variable nice and localized rather than making it global.

Then we come to this and it doesn't make any sense either:

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;  
    }
}

Remember that frmflds is a two dimensional array, not a three dimensional one; so, var e = frmflds[j][0][1]; won't do anything useful. I think you want this:

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

Now, getElementById() is a method on document and it requires an ID as an argument, getElementById() also returns a single element (not an array) so you want this:

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

Your if statements require parentheses. And, if your form elements have id attributes, use them rather than trying to go through 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;
}

That should get you something that will at least run. Further debugging is left as an exercise for the reader.

instead of try to loop through them why don't you use jQuery Validate this would cover all the standard validations. then if you have custom regex you like to run you can use the addMethod() function it will save you lots of head ache and its well documented

here is an example of how to add a validation method